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