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

Emmet Style Reflector

Reflect Emmet HTML expansion in Sass/LESS

Details

Installs

  • Total 124K
  • Win 96K
  • OS X 18K
  • Linux 10K
Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4 Dec 3 Dec 2 Dec 1 Nov 30 Nov 29 Nov 28 Nov 27 Nov 26 Nov 25 Nov 24 Nov 23 Nov 22 Nov 21 Nov 20 Nov 19 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
Windows 31 98 131 128 109 137 89 95 123 108 123 138 150 74 93 126 121 126 146 132 96 98 139 125 107 120 160 109 112 137 133 127 140 152 96 97 127 136 130 149 150 88 123 130 117 154
OS X 2 22 21 12 13 19 10 15 17 16 15 21 17 14 13 11 24 21 20 19 9 14 18 16 31 20 16 13 13 19 18 22 23 24 17 10 23 23 20 20 23 13 8 20 19 23
Linux 1 8 6 4 8 6 4 7 5 6 7 10 14 9 6 7 4 10 9 9 3 7 11 5 7 11 16 4 2 4 8 12 8 11 6 5 11 10 8 12 6 7 7 11 11 6

Readme

Source
raw.​githubusercontent.​com

emmet-style-reflector

Dependency

Obviously, Emmet

Description

Reflect Emmet HTML expansion in Sass/LESS

How to use

Alt text for your video

Changelogs

v1.0.2

  • tag without class and id will have “>”

Expansions tested

  • Child: #first>ul>li
#first {

    >ul {

        >li {

        }

    }

}
  • Sibling: div+p+blockquote
>div {

}

>p {

}

>blockquote {

}
  • Climb-up: #first+#second>p>span+em^blockquote
#first {

}

#second {

    >p {

        >span {

        }

        >em {

        }

    }

    >blockquote {

    }

}
  • Grouping: #first>(header>ul>li*2>a)+footer>p
#first {

    header {

        >ul {

            >li {

                >a {

                }

            }

        }

    }

    footer {

        >p {

        }

    }

}
  • Video demo: header>(ul#menu>li*5>a)^div#home>div.rensponsive960>div.box>div.title+div.body
header {

    #menu {

        >li {

            >a {

            }

        }

    }

}

#home {

    .rensponsive960 {

        .box {

            .title {

            }

            .body {

            }

        }

    }

}
  • Extreme: #first>(header[title="Hello world!"]>ul#menu>li.menuItem$@-*5>a)+footer{bla bla bla}^script
#first {

    header {

        #menu {

            .menuItem {

                >a {

                }

            }

        }

    }

    footer {

    }

}

script {

}