Prius enables you to write next generation CSS in your apps today. It operates via a hybrid runtime and preprocessor. Prius is currently intended for usage inside Ember CLI applications, however it was built to be used with any JS framework.
ember install prius
Add {{prius-meta}} to the <head> of your app/index.html & tests/index.html
TODO: instructions for general usage.
.button {
font-size: var(--font-size, 1em);
}
.button-large {
--font-size: 2em;
}
:root {
--primary-color: red;
}
.button {
color: darken(var(--primary-color)); /* `darken` is a custom function */
}
As proposed by the Polymer team: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
:root {
--my-mixin: {
padding: 0.5em;
--color: red;
}
}
.button {
@apply(--my-mixin);
background-color: var(--color);
}