https://github.com/babobski/css-selector-to-scss

Turns a CSS selector or rule into nested SCSS
https://github.com/babobski/css-selector-to-scss

vscode

Last synced: about 2 months ago
JSON representation

Turns a CSS selector or rule into nested SCSS

• Host: GitHub
• URL: https://github.com/babobski/css-selector-to-scss
• Owner: babobski
• Created: 2021-10-23T23:41:38.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-07T20:00:55.000Z (over 3 years ago)
• Last Synced: 2024-11-10T02:03:56.653Z (3 months ago)
• Topics: vscode
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=babobski.css-selector-to-scss
• Size: 129 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# CSS selector to SCSS

This extensions allows you to convert CSS selectors or rules into nested SCSS.  

It works with the clipboard values you would get from:

![Copy rule or selector](images/copy-selector-or-rule-in-chrome.jpg)

This extension got two commands:

* Convert CSS selector to SCSS from clipboard

* Convert CSS rule to SCSS from clipboard

## Convert CSS selector to SCSS from clipboard

This command wil turn a selector in a nested SCSS structure.  

Executing the command with the following value on your clipboard:

```css

#sidebar .title

```

Will result in the following result:

```scss

#sidebar {

    .title {

        |

    }

}

```

## Convert CSS rule to SCSS from clipboard 

This command turns a copied css rule to a nested SCSS structure.  

The following copied code:

```css

#sidebar .title {

	flex: 3;

	font-size: 17px;

	align-self: center;

	white-space: nowrap;

	opacity: 0;

	transition: opacity 300ms ease;

}

```

Will result in:

```scss

#sidebar {

    .title {

        flex: 3;

        font-size: 17px;

        align-self: center;

        white-space: nowrap;

        opacity: 0;

        transition: opacity 300ms ease;

    }

}

```

## Limitations

Currently the plugin only supports single line rules and selectors.  

If a rule or selector contains `,` only the first part will be processed.