📏 PX to REM - VS Code Extension
Easily convert pixel (px ) values to rem() wrappers using a simple keyboard shortcut in Visual Studio Code.
✨ Features
- ✅ Convert
35px to rem(35px) with one shortcut — no text selection required.
- ✅ Works with single or multiple cursors.
- ✅ Smart conversion on current line or selected lines.
- ✅ Fast and lightweight — perfect for CSS, SCSS, or styled-components.
🚀 How to Use
- Open a CSS/SCSS file or any text file containing
px values.
- Place your cursor on a line or select multiple lines.
- Press
Ctrl + Shift + Q (or your configured shortcut).
- All pixel values like
20px , 48px , etc., will be wrapped as rem(20px) , rem(48px) .
⚡ Example:
padding: 20px 10px; → padding: rem(20px) rem(10px);
🎯 Keyboard Shortcut
- Default:
Ctrl + Shift + Q
- You can change the keybinding from:
File → Preferences → Keyboard Shortcuts → search for px-to-rem .
📦 Installation
Option 1: From VS Code Marketplace
- Go to the VS Code Marketplace and search for px-to-rem.
- Click Install.
- Start converting!
Option 2: From .vsix file
code --install-extension px-to-rem-wrapper-0.0.9.vsix
| |