JSS plugin enables support for nested rules
Make sure you read how to use plugins in general.
&
to reference selector of the parent rule.
Use const styles = container: padding: 20 '&:hover': background: 'blue' // Add a global .clear class to the container. '&.clear': clear: 'both' // Reference a global .button scoped to the container. '& .button': background: 'red' // Use multiple container refs in one selector '&.selected, &.active': border: '1px solid red'
Compiles to:
$ruleName
to reference a local rule within the same style sheet.
Use const styles = container: // Reference the local rule "button". '& $button': padding: '10px' // Multiple local refs in one rule. '&:hover $button, &:active $button': color: 'red' '&:focus $button': color: 'blue' button: color: 'grey'
Compiles to:
Use at-rules inside of regular rules.
const styles = button: color: 'red' '@media (min-width: 1024px)': width: 200
Compiles to:
{}
Deep nesting
const styles = button: '&$warn': color: 'red' '&:hover, &:focus': color: 'white' background: 'red' warn: {}
Compiles to:
Demo
Issues
File a bug against cssinjs/jss prefixed with [jss-nested].
Run tests
npm inpm run test
License
MIT