❤
npm
Sign UpSign In

stylecow-plugin-extend

2.0.0 • Public • Published

stylecow plugin extend

Build Status

Stylecow plugin to work with @extend using the syntax proposed by Tab Atkins.

%button {
    display: inline-block;
    padding: 1em;
}
 
%big-button {
    @extend %button;
    font-size: 2em;
}
 
%red-big-button {
    @extend %big-button;
    color: red;
}
 
.button {
    @extend %button;
}
 
.big-button {
    @extend %big-button;
}
 
.red-big-button {
    @extend %red-big-button;
}
 
.red-big-button-rounded {
    @extend %red-big-button;
    border-radius: 8px;
}

And stylecow converts to:

.red-big-button, .red-big-button-rounded, .big-button, .button {
    display: inline-block;
    padding: 1em;
}
.red-big-button, .red-big-button-rounded, .big-button {
    font-size: 2em;
}
.red-big-button, .red-big-button-rounded {
    color: red;
}
.red-big-button-rounded {
    border-radius: 8px;
}

More demos in the tests folder

/stylecow-plugin-extend/

    Package Sidebar

    Install

    npm i stylecow-plugin-extend

    Repository

    github.com/stylecow/stylecow-plugin-extend

    Homepage

    github.com/stylecow/stylecow-plugin-extend

    Weekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • oscarotero
    Try on RunKit
    Report malware