Specification

The nesting syntax

The syntax is very similar to what other CSS preprocessors already deliver, the difference is that in the concatenation operator of the "&" selector, the space between the operator and the selector is ignored, and is immediately included next to the parent selector, example:

div {
    & :hover {
        color: blue;
    }
}

Will translate to:

div:hover {
    color: blue
}

If you want an space between div and :hover, just remove the & symbol before the selector.

Also, it propagates the selectors when they are separate to the same rule, for example:

div,
span {
    & :hover,
    & :active {
        color: red;
    }
}

Will translate to:

div:hover,
span:hover,
div:active,
span:active {
    color: red
}

The compiler doesn't know what you're typing, it compiles based on the tokens you type. Using the @ operator will automatically start a new style sheet inside the body, and concatenate to the parent style:

div {
    color: red;
}

@blablabla {
    div {
        color: blue;

        & .yellow {
            color: yellow;
        }
    }
}

Compiles to:

div {
    color: red
}

@blablabla {
    div {
        color: blue
    }

    div.yellow {
        color: yellow
    }
}