put()

put() is the only addon that comes pre-installed with nano-css. It injects CSS given a selector and a CSS-like object.


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


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

CSS-like Objects

The second argument is a CSS-like object that maps directly to CSS:


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

Equivalent CSS:


.selector {
  color: red;
}
.selector:hover {
  color: blue;
}

put() supports arbitrarily deep nesting out of the box:


nano.put('.card', {
  div: {
    span: {
      ':hover': {
        color: 'blue',
      },
    },
  },
});

Result:


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

For advanced nesting with & selectors and comma separation, install the nesting addon.

Both kebab-case and camelCase property names are supported:


// kebab-case
nano.put('.a', { 'text-decoration': 'none' });
 
// camelCase
nano.put('.b', { textDecoration: 'none' });

Pass an at-rule string as the third argument:


nano.put('.responsive', { fontSize: '14px' }, '@media (max-width: 600px)');