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