LESS nesting for parental examination - In this example we wish to assist our media queries with JavaScript to determine if the device is a mobile device or not. Our JavaScript will place a class or attribute on the body tag. When we get to our media queries, we only want to apply the code if body has the class or attribute confirming the device…

LESS nesting for parental examination.less

body {
    /* this has the possible class or data attribute of 'mobile' */
    /* this is not included in the nest as you can't climb at will */
    /* the class or attribute (via our JavaScript) could be applied
       to any element that sits above and outside of `#level-1` in 
       this example */

}

#level-1 { 

    #level-2 {

        #level-3 {

            #level-4 {

                body:not(.mobile) & {

                    /* produces the following CSS */
                    /* body:not(.mobile) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile class */

                    @media screen and (max-width:) {

                    }
                }

                body:not([data-device=mobile]) & {

                    /* produces the following CSS */
                    /* body:not([data-device="mobile"]) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile data-device attribute */

                    @media screen and (max-width:) {

                    }
                }

            }

        }

    }

}