Awesome
rework-mixins
Rework CSS mixins.
Example
Using all mixing:
var rework = require('rework');
var rework_mixin = require('rework-plugin-mixin');
var mixins = require('rework-mixins');
var css = rework('some css here')
.use(rework_mixin(mixins))
.toString();
Or specific mixing:
var rework = require('rework');
var rework_mixin = require('rework-plugin-mixin');
var mixins = require('rework-mixins');
var css = rework('some css here')
.use(rework_mixin({
overflow: mixins.overflow
}))
.toString();
Mixins
overflow: ellipsis
mixins.overflow
:
h1 {
overflow: ellipsis
}
yields:
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
border-radius
mixins.border-radius
:
button {
border-radius: top 5px bottom 10px
}
yields:
button {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
absolute | relative | fixed
mixins.{absolute,relative,fixed}
:
#logo {
absolute: top left
}
yields:
#logo {
position: absolute;
top: 0;
left: 0
}
#logo {
fixed: top 5px left 10px
}
yields:
#logo {
position: fixed;
top: 5px;
left: 10px
}
size
mixins.size
:
#logo {
size: 100px 50px
}
#icon {
size: 32px
}
yields:
#logo {
width: 100px;
height: 50px
}
#icon {
width: 32px;
height: 32px
}
License
MIT