HTML To Scss

by hxss ALL

Sublime plugin

Details

Version 1.0.0
Homepage bitbucket.org
Modified 7 years ago
Last Seen 6 days ago
First Seen 6 years ago

Installs

Total 3K
Win 3K
Mac 259
Linux 249

	Apr 3	Apr 2	Apr 1	Mar 31	Mar 30	Mar 29	Mar 28	Mar 27	Mar 26	Mar 25	Mar 24	Mar 23	Mar 22	Mar 21	Mar 20	Mar 19	Mar 18	Mar 17	Mar 16	Mar 15	Mar 14	Mar 13	Mar 12	Mar 11	Mar 10	Mar 9	Mar 8	Mar 7	Mar 6	Mar 5	Mar 4	Mar 3	Mar 2	Mar 1	Feb 28	Feb 27	Feb 26	Feb 25	Feb 24	Feb 23	Feb 22	Feb 21	Feb 20	Feb 19	Feb 18
Windows	0	1	1	0	0	5	0	0	0	1	0	0	0	0	0	1	0	0	2	0	0	0	2	2	1	0	0	0	0	2	0	1	1	0	0	0	1	1	0	0	0	0	2	1	1
Mac	0	1	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	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	2	0	0	0	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	1	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 {
        }
    }
}