@yuanchuan/style

Style

Create stylesheets dynamically in JavaScript.

Installation

component install yuanchuan/style

Usage

var Style = require('style');
var style = new Style();

style.load(
  'body { background:blue; }',
  'p    { color: red; }'
)

Defining variables:

var style = new Style()

style.define({
  color1: '#23efab',
  color2: '#ff3233' 
})

style.load(
  'img { border: 1px @color1 solid }',
  'a:hover { border: 1px @color2 dashed }'
)

More examples

Using add() to append new styles and refresh later using load():

style
  .define({
    color1: '#23efab',
    color2: '#ff3233'
  })
  .add(
    'img { border: 1px @color1 solid }'
  )
  .add(
    'a: hover{ border: 1px @color2 dashed }'
  )
  .load()

Re-defining a variable then apply:

style
  .define({
    color1: 'blue',
    color2: 'red'
  })
  .load() 

Clear all the added styles:

style.clear()

Unload the content from the stye element but keep rules and map

style.unload()

Remove completely:

style.remove()

API Reference

.define(Object variables)
.add(String style, ...)
.load([String style, ...])
.unload()
.clear()
.remove()

License

The MIT license.