Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>px-to-rem-wrapperNew to Visual Studio Code? Get it now.
px-to-rem-wrapper

px-to-rem-wrapper

Krunal Balas

|
6 installs
| (0) | Free
Convert px to rem via wrapper
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

📏 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

  1. Open a CSS/SCSS file or any text file containing px values.
  2. Place your cursor on a line or select multiple lines.
  3. Press Ctrl + Shift + Q (or your configured shortcut).
  4. 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

  1. Go to the VS Code Marketplace and search for px-to-rem.
  2. Click Install.
  3. Start converting!

Option 2: From .vsix file

code --install-extension px-to-rem-wrapper-0.0.9.vsix
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft