📐 px‑to‑units
A tiny VS Code extension that instantly converts px to rem , vw , em & more right from your autocomplete 🤯

✨ Features
- 🧠 Smart autocomplete: suggestions appear automatically after any
px value or Control + Space.
- 🌎 Supports CSS, SCSS/Sass, Less, PostCSS and CSS‑in‑JS blocks.
- 🎛️ Customisable base values (
rootFontSize , viewportWidth , precision).
- ⚡ Zero‑config: works right out of the box.
📺 Demo

The demos above convert 16px to 1rem , 0.83vw , 1em , etc.
🚀 Quick Start
Install from the VS Code Marketplace or run:
ext install px-to-units.px-to-units
Open any .css , .scss , .sass , .less , or .pcss file.
Type a rule with a pixel value:
font-size: 12px;
Once you finish typing px , the extension will show suggestions (like rem , vw , em ) to replace it.
🎉 Done! The selected unit replaces the pixel value — no manual maths 🧮.
⚙️ Extension Settings
Setting |
Default |
Description |
pxToUnits.rootFontSize |
16 |
Base font‑size used for rem / em conversions. |
pxToUnits.viewportWidth |
1920 |
Viewport width used for vw conversions. |
pxToUnits.decimalPlaces |
2 |
Number of decimals to keep in suggestions. |
pxToUnits.additionalUnits |
[] |
Array of custom units & formulas. |
Access settings via File → Preferences → Settings → Extensions → px‑to‑units.
🧩 Supported Languages & Scopes
Language |
Scope ID |
CSS |
css |
SCSS / Sass |
scss , sass |
Less |
less |
PostCSS |
postcss |
CSS‑in‑JS (template‑literal blocks) |
javascriptreact , typescriptreact |
📄 License
Released under the MIT license © 2025 fab-henao.
Built with ❤️ & TypeScript. Enjoy your new responsive workflow! 🚀
| |