Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tautvydasderzinskas/vscode-html-to-css
Visual Studio Code extension enables developers to convert HTML code to CSS / LESS / SCSS selectors!
https://github.com/tautvydasderzinskas/vscode-html-to-css
css html less scss typescript vscode vscode-extension
Last synced: 9 days ago
JSON representation
Visual Studio Code extension enables developers to convert HTML code to CSS / LESS / SCSS selectors!
- Host: GitHub
- URL: https://github.com/tautvydasderzinskas/vscode-html-to-css
- Owner: TautvydasDerzinskas
- License: mit
- Created: 2019-03-20T00:20:53.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-05T03:04:05.000Z (almost 2 years ago)
- Last Synced: 2023-02-27T17:52:13.760Z (over 1 year ago)
- Topics: css, html, less, scss, typescript, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=tautvydasderzinskas.vscode-html-to-css
- Size: 4.08 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Table of content
- [About](#about)
- [Preview](#preview)
- [Usage](#usage)
- [Installation](#installation)
- [Configuration](#configuration)
- [Credits](#credits)
- [License](#license)
- [Changelog](CHANGELOG.md)
## 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](https://code.visualstudio.com/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](https://code.visualstudio.com/docs/getstarted/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](https://github.com/Johnhhorton).
Please check out his awesome [scssifyhtml project](https://github.com/Johnhhorton/scssifyhtml)!
## License
The repository code is open-sourced software licensed under the [MIT license](https://github.com/TautvydasDerzinskas/vscode-html-to-css/blob/master/LICENSE?raw=true).
