stylus-vars

make javascript variables available to stylus

Showing:

Popularity

Downloads/wk

1

GitHub Stars

3

Maintenance

Last Commit

7yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

0.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

StylusVars

Converts javascript variables to stylus variables; allows to use one configuration file for your sizes and colors in both javascript and stylus. Accepts nested variables, and automatically parses units and colors.

Usage

var config = {
    sizes:{
        width:"500px"
    ,   height:"200px"
    }
,   background:"rgba(10,10,100)"
,   color:[100,10,10,.5]//this array will be parsed as a color because the key contains "background" or "color"
,   someArray:[100,0,0,2]
}
var str = require('fs').readFileSync(__dirname+'/style.styl',{encoding:'utf8'});

var stylus = require('stylus');

var stylusVars = require('stylus-vars')(config,{delimiter:'-'});
// the delimiter option defines how nested objects will be represented

stylus(str)
    .set('filename','style.css')
    .use(stylusVars)
    .render(function(err, css){
        if(err){throw err;}
        console.log(css);
    })
;

//style.styl
div
    width sizes-width + 50
    height sizes-height
    background background
    color color

yields:

div {
  width: 550px;
  height: 200px;
  background: #0a0a64;
  color: rgba(100,10,10,0.5);
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100