[Feature Request] Add Support for LESS' Nested Selectors

[luxlogica]

Let's say I have some rectangles in Sketch, which I named .rect .bordered. I then add some ovals, which I name '.oval .bordered`. I would like to be able to do this - which is perfectly valid LESS:

.bordered {
    border: 3px solid red;

    .rect { background-color: fade(red,75%);
    .oval { background-color: fade(blue,55%);
}

Currently, the nested selectors - .rect and .oval - get totally ignored, and all you get is a red border, and no background. To get what we want, right now it is necessary to repeat ourselves, and do:

.bordered.rect {
    border: 3px solid red;
    background-color: fade(red,75%);
}

.bordered.oval {
    border: 3px solid red;
    background-color: fade(blue,55%);
}

As you can imagine, for complex layouts with hundreds of nested objects, being able to use LESS' nested selectors is vital!

[andrewmbacon]

This would be amazing. Willing to pitch in on the feature... not sure how to get started.

[JohnCoates]

@luxlogica, @andrewmbacon: this does work, just your syntax is a bit wrong

You have this:

.bordered {
    border: 3px solid red;

    .rect { background-color: fade(red,75%);
    .oval { background-color: fade(blue,55%);
}

This will match a layer setup like this: .bordered > .rect or .bordered > .oval, so basically a group with .rect and inside a layer with .oval or .rect

To match a layer named .rect .bordered change your LESS to:

.bordered {
    border: 3px solid red;

    &.rect { background-color: fade(red,75%);
    &.oval { background-color: fade(blue,55%);
}

Hope this helps!

[luxlogica]

@JohnCoates Doh! That's awesome! 👍