使嵌套选择器生成没有 space 的选择器

Question

我在 Less 中有一个特定的场景，我想用更简单的方式来写。

我有这个 html:

<div class="parent selector-one selector-two">
    Parent
    <div class="child">
        Child
    </div>
    <div class="second-child">
        Second child
    </div>
</div>

我想生成这个 css by less:

.parent {
    font-size: 14px;
}

.parent.selector-one {
    color green;
}

.parent.selector-two .child {
    color: red;
}

.parent .second-child {
    color: blue;
}

我想在 Less 中写这样的东西：

.parent {
    #SYNTAX#:selector-one {
        color:green;
    }

    #SYNTAX#:selector-two {
        &.child {
            color:red;
        }
    }

    &.second-child {
        color: blue;
    }
}

在 Less 中有没有语法可以做这样的事情？

Answer 1

我相信这应该可以完成工作。

作为&选择父元素。

.parent {
    &.selector-one {
        color:green;
    }

    &.selector-two {
        .child {
            color:red;
        }
    }

    & .second-child {
        color: blue;
    }
}

使嵌套选择器生成没有 space 的选择器

Making nested selector to generate selector without space

css

less