put.md

put()

put() is the only addon that comes pre-installed with nano-css.

It simply injects CSS given a selector and a CSS-like object.

nano.put('.foo', {
    color: 'red',
    ':hover': {
        color: 'blue'
    }
});

Now you can use the foo class name.

<div class="foo">Hover me!</div>

CSS-like object

The second argument of the put() function is a CSS-like object.

{
    color: 'red',
    ':hover': {
        color: 'blue'
    }
}

It maps 1-to-1 to analogous CSS.

.selector {
    color: red;
}

.selector:hover {
    color: blue;
}

Nesting

put() supports basic arbitrarily deep nesting out-of-the-box.

{
    div: {
        span: {
            ':hover': {
                color: 'blue'
            }
        }
    }
}

The above will result in:

.selector div span:hover {
    color: blue;
}

For more advanced nesting feature install nesting addon.

Kebab-case and Camel-case Properties

Out-of-the-box nano-css supports kebab-case

{
    'text-decoration': 'none'
}

and camel-case property syntax.

{
    textDecoration: 'none'
}

It also supports Atoms via the atoms addon and "chaining" using the snake addon. You might also want to take a look at stylis addon that supports writing CSS as a string and tachyons addon that allows to chain tachyons.