[jss-nested] nesting like Sass include-media

[trusktr]

Is your feature request related to a problem? Please describe.

In Sass we can do

    html {
        @include media('>=XS4') {
            #root, #header, #mobileMenu {
                transform: scale( $scale-xs4 );
                width: calc( 100% * 1 / #{ $scale-xs4 } );
            }
        }
    }

Can we do similar with JSS? I don't see it in the docs.

Describe the solution you'd like

To write something like

const style = {
    'html': {
        [`@media (max-width: ${XS4})`]: {
            '& #root, & #header, & #mobileMenu': (`
                transform: scale( ${theme.media.scaleXS5} );
                width: calc( 100% * 1 / ${theme.media.scaleXS5} );
            `),
        },
    }
}

so that the nested & inside the media query refers to the parent html selector that is outside the media query.

[HenriBeck]

you can nest at-rules with the jss-nested plugin: http://cssinjs.org/jss-nested?v=v6.0.1#use-at-rules-inside-of-regular-rules

[trusktr]

@HenriBeck

Yep, tested it, the example

const style = {
    'html': {
        [`@media (max-width: ${XS4})`]: {
            '& #root, & #header, & #mobileMenu': (`
                transform: scale( ${theme.media.scaleXS5} );
                width: calc( 100% * 1 / ${theme.media.scaleXS5} );
            `),
        },
    }
}

works.

---

There isn't any example like that in the docs though. It'd be nice to add an example that shows using & inside of an @ rule works (currently there are only examples of style properties inside the at-rules).