nano-css
allows to do basic class name nesting out-of-the-box. This addon
extends that functionality in the following ways.
Interpolates nested selectors separated by comma.
nano.put('.foo', {
'.bar, .baz': {
color: 'red'
}
});
This results in:
.foo .bar, .foo .baz {
color: red;
}
Introduces &
meta character, which refers to the parent selector.
nano.put('.foo', {
color: 'red',
'&:hover': {
color: 'blue'
},
'.global_class &': {
color: 'green'
}
});
This results in:
.foo {
color: red;
}
.foo:hover {
color: blue;
}
.global_class .foo {
color: green;
}
Simply install nesting
addon. Read more about the Addon Installation.