Nested Css Selectors

Supported Version: 2.0.0-pre1 or higher

What are Nested Selectors?

Nested selectors allow you to reflect the hierarchal structure of your controls in css.

Instead of writing

.header {
    BackgroundColor: Red;
}

Button {
    BackgroundColor: Blue;
}

.header Button {
    BackgroundColor: Green;
}

you can write

Button {
    BackgroundColor: Blue;
}

.header {
    BackgroundColor: Red;
    
    Button {
        BackgroundColor: Green;
}

Ampersand-Selector

The ampersand-selector inserts the previous parent-selectors into the current selector. I.e. if you want to achive a selector .header Button.active just use the &.active under the Button selector.

The following sample defines that a Button with a class active contained in a .header should have a bold text:

Button {
    BackgroundColor: Blue;
}

.header {
    BackgroundColor: Red;
    
    Button {
        BackgroundColor: Green;
        
        &.active {
            FontAttributes: Bold;
        }
}

compiles to

.header {
    BackgroundColor: Red;
}

Button {
    BackgroundColor: Blue;
}

.header Button {
    BackgroundColor: Green;
}

.header Button.active {
    FontAttributes: Bold;
}

Ampersand-Selector Anywhere

Since 2.1.0 you can use the ampersand anywhere in the selector. This is handy if you want to express your styling the other way round: If the current element is found in a container for example.

The following scss generates the exact same style as the previously shown:

.header {
    BackgroundColor: Red;
}

Button {
    BackgroundColor: Blue;
    
    /* if a button is in an header */
    .header & {
        BackgroundColor: Green;
  
        &.active {
            FontAttributes: Bold;
        }
    }
}