This is a library of stylus mixins for the most natural syntax in stylus
stylus is based on natural syntax, this mixins starts with programmers' desireds shorthands
.awesome-grid
grid-template 'faz' 60px \
'foo' auto \
'bar' auto /\
1fr
lg grid-template 'faz faz' 60px \
'foo bar' auto \/\
2fr 1fr
xl grid-template 'faz faz' 60px \
'foo bar' auto \/\
3fr 1fr
yields:
.awesome-grid {
grid-template: 'faz' 60px 'foo' auto 'bar' auto/1fr;
}
@media screen and (min-width: 900px) {
.awesome-grid {
grid-template: 'faz faz' 60px 'foo bar' auto/2fr 1fr;
}
}
@media screen and (min-width: 1200px) {
.awesome-grid {
grid-template: 'faz faz' 60px 'foo bar' auto/3fr 1fr;
}
}
this do not provide prefixes, because nib and postcss are written for make it
- array functions
- @medias
- basic mixins
- new breakpoints system
- new color shortcuts
- flexbox shortcuts
- and more!
npm i -D stylus-kit
npx stylus index.styl -u node_modules/stylus-kit
const stylus = require('stylus')
const { readFileSync } = require('fs')
const stylusKit = require('stylus-kit')
stylus(readFileSync('./index.styl', 'utf-8'), {
use: [stylusKit()]
}).render(console.error, console.log)
{
loader: 'stylus-loader',
options: {
stylusOptions: {
use: ['stylus-kit']
}
}
}
add the library in your index.styl
@require stylus-kit
contributors welcome, lets revive stylus with for comfort for all of us!