HTML To Scss

by hxss ALL Missing

Sublime plugin

Details

Version 1.0.0
Homepage bitbucket.org
Modified 8 years ago
Last Seen 1 week ago
First Seen 8 years ago

Installs

Total 3K
Win 3K
Mac 278
Linux 264

	Aug 5	Aug 4	Aug 3	Aug 2	Aug 1	Jul 31	Jul 30	Jul 29	Jul 28	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
Windows	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	0	0	0	1	0	0	0	0	0	0	0	0
Mac	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	1	0	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	0	0	0	0	0	0	0	0	0	0	0	3	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 {
        }
    }
}