stylecow-plugin-variables

stylecow plugin variables

Stylecow plugin to work with variables using the standard var(), available in CSS Custom Properties for Cascading Variables Module Level 1.

For global variables (available in all properties), you have to define them in the selectors :root or html. Use nested rules to create scoped variables.

:root {
    --mycolor: red;
}

.foo {
    color: var(--mycolor);
}

.foo h2 {
    --mycolor: blue;

    color: var(--mycolor);
    font-size: var(--mySize, 24px);
}

And stylecow converts to:

.foo {
    color: red;
}

.foo h2 {
    color: blue;
    font-size: 24px;
}

More demos in the tests folder