HTML To Scss
Sublime plugin
Details
Installs
- Total 3K
- Win 2K
- Mac 244
- Linux 230
Jun 1 | May 31 | May 30 | May 29 | May 28 | May 27 | May 26 | May 25 | May 24 | May 23 | May 22 | May 21 | May 20 | May 19 | May 18 | May 17 | May 16 | May 15 | May 14 | May 13 | May 12 | May 11 | May 10 | May 9 | May 8 | May 7 | May 6 | May 5 | May 4 | May 3 | May 2 | May 1 | Apr 30 | Apr 29 | Apr 28 | Apr 27 | Apr 26 | Apr 25 | Apr 24 | Apr 23 | Apr 22 | Apr 21 | Apr 20 | Apr 19 | Apr 18 | Apr 17 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 2 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | 0 | 3 | 0 | 0 | 0 | 0 | 1 |
Mac | 0 | 0 | 1 | 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 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 |
Linux | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
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 {
}
}
}