Seamlessly convert pixels (PX) to other units for fluid and responsive CSS designs!
✨ Features
Automatic Conversion: Converts pixels px values in your CSS files to rem or em units effortlessly.
CodeLens Support: Easily convert values with a single click directly in your code editor. 💡
Customizable Settings: Set your default decimal places and base font size for conversions in the settings. ⚙️
Inline Replacement: Replace values inline for a cleaner code experience. ✏️
Sample Preview
📦 Installation
Open Visual Studio Code.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side.
Search for Unit Flux and click Install.
🛠️ Usage
Once installed, open any style file (css | scss | less).
UnitFlux will detect the pixel values and provide the Code Lens.
Click on the CodeLens to convert the value to rem or em.
See the magic happens! 🪄
⚙️ Configuration
You can customize the extension settings by adding the following configuration in your settings.json:
{
"unitFlux.baseFontSize": 16, // Set base font size for conversion
"unitFlux.enableCodeLens": true, // Toggle Code Lens feature
"unitFlux.defaultDecimalPlaces": 4 // Set default decimal places for conversion
}
📄 License
This project is licensed under the MIT License. See the LICENSE file for details.
