rework-plugin-mixin
A Rework plugin to add user-defined mixins.
Installation
npm install rework-plugin-mixin
Use
User-defined mixins are functions that are invoked for a given property, and passed the value. They return an object that represents one or more properties.
For example the following overflow
mixin allows the designer to utilize
overflow: ellipsis;
to automatically assign associated properties preventing
wrapping etc.
The receiver (this
) is the Rework
instance, allowing the mixin to reference
properties such as the vendor .prefixes
array.
var rework = ;var mixin = ; var css = ; { if 'ellipsis' == type return 'white-space': 'nowrap' 'overflow': 'hidden' 'text-overflow': 'ellipsis' return type;}
Mixins in use look just like regular CSS properties:
yields:
You may also return array values to expand to several definitions of the property:
{ if 'flex' == type return display: '-webkit-flex' '-moz-flex' '-webkit-flexbox' 'flex' return display: type }
Would yield: