HTML To Scss
Sublime plugin
Details
Installs
- Total 772
- Win 633
- Mac 79
- Linux 60
| Feb 28 | Feb 27 | Feb 26 | Feb 25 | Feb 24 | Feb 23 | Feb 22 | Feb 21 | Feb 20 | Feb 19 | Feb 18 | Feb 17 | Feb 16 | Feb 15 | Feb 14 | Feb 13 | Feb 12 | Feb 11 | Feb 10 | Feb 9 | Feb 8 | Feb 7 | Feb 6 | Feb 5 | Feb 4 | Feb 3 | Feb 2 | Feb 1 | Jan 31 | Jan 30 | Jan 29 | Jan 28 | Jan 27 | Jan 26 | Jan 25 | Jan 24 | Jan 23 | Jan 22 | Jan 21 | Jan 20 | Jan 19 | Jan 18 | Jan 17 | Jan 16 | Jan 15 | Jan 14 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | 3 | 2 | 3 | 2 | 1 | 3 | 1 | 2 | 4 | 3 | 5 | 3 | 0 | 3 | 0 | 1 | 4 | 1 | 5 | 3 | 2 | 2 | 3 | 2 | 3 | 1 | 2 | 2 | 4 | 3 | 4 | 1 | 2 | 4 | 1 | 3 | 2 | 1 | 3 | 2 | 1 | 2 | 0 | 2 | 3 | 3 |
| Mac | 0 | 0 | 1 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 |
| Linux | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 2 |
Readme
- Source
- bitbucket.org
html2scss
This plugin parse your html and puts its scss rules(grouped by classes) into clipboard.
Usage
The package provide 1 command - html2scss with 1 optional argument - all_attrs = False. You can use it with shortcut or run from command palette(html2scss)
After you run the command in your html file, you'll see message in status bar: scss rules copied!. By default all file will be parsed, but you can select any region you need.
Now you can paste the rules in your scss file with Ctrl+v
Example
Input html:
<div class="class1">
<div class="class2" id="id2" >
<div>
<div class="class5"></div>
<div class="class3 cls3 cls3--mod" test></div>
<div class="class3 otherClass"></div>
<div class="class3 cls3" data-attribute attr="simple" test></div>
<div class="class4"></div>
<div class="class4"></div>
<a href="#"></a>
</div>
</div>
</div>
Result rules:
.class1 {
#id2.class2 {
.class5 {
}
.class3 {
&.cls3 {
&.cls3--mod {
}
}
&.otherClass {
}
}
.class4 {
}
}
}
Result rules with all_attrs:
.class1 {
#id2.class2 {
.class5 {
}
.class3 {
&.cls3 {
&.cls3--mod[test] {
}
&[data-attribute][attr="simple"][test] {
}
}
&.otherClass {
}
}
.class4 {
}
}
}