ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

HTML To Scss

by hxss ST2/ST3

Sublime plugin

Details

  • 1.0.0
  • bitbucket.​org
  • 3 months ago
  • 29 minutes ago
  • 4 weeks ago

Installs

  • Total 95
  • Win 73
  • OS X 15
  • Linux 7
Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31 Oct 30 Oct 29 Oct 28 Oct 27 Oct 26 Oct 25 Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9 Oct 8 Oct 7 Oct 6 Oct 5
Windows 1 3 2 1 3 2 2 2 0 2 3 4 3 1 1 2 7 6 4 6 2 3 4 3 7 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
OS X 2 0 0 1 0 0 1 0 0 3 0 0 0 0 0 2 1 1 1 2 0 0 1 0 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 1 1 1 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 {
        }
    }
}