HTML to CSS / LESS / SCSS

Table of content

• About
• Preview
• Usage
• Installation
• Configuration
• Credits
• License
• Changelog

About

Visual Studio Code extension enables developers to convert HTML code to CSS / LESS / SCSS style syntax!

Please see preview & usage for more information.

Preview

Usage

Default usage:

1. Copy valid HTML code (including opening & closing tags)
2. Activate the window where you want to paste the converted style selectors & click right mouse button to get to the its context menus then select highlighted option:

Keybind usage:

1. Copy valid HTML code (including opening & closing tags)
2. Paste the code using key combination CMD/CTRL+ALT+V
3. It will paste CSS selectors to *.css files and SCSS / LESS selectors to all other files.

Alternative usage:

1. Open command pallete by clicking CMD/CTRL+SHIFT+P
2. Type Paste HTML converted to CSS / LESS / SCSS and select suggested option

Installation

Via Quick Open:

1. Download, install and open VS Code
2. Press CMD/CTRL+P to open the Quick Open dialog
3. Type ext install tautvydasderzinskas.vscode-html-to-css
4. Click the Install button, then the Enable button

Via the Extensions tab:

1. Click the extensions tab or press CMD/CTRL+SHIFT+X
2. Search for html for css/less/scss
3. Click the Install button, then the Enable button

Via the command line:

1. Open a command-line prompt
2. Run code --install-extension TautvydasDerzinskas.vscode-html-to-css

Configuration

Extension provides these User and Workspace settings:

• htmlToCss.hideTags - hide tag selector if element has class or id (default: true)
• htmlToCss.convertBEM - recognize BEM classes and split them accordingly (default: true)
• htmlToCss.preappendHtml - pre-append comment containing transformed html structure (default: false)

Credits

This project uses big portion of logic written by Harry Horton.

Please check out his awesome scssifyhtml project!

License

The repository code is open-sourced software licensed under the MIT license.