css - 相对选择器的 Less & analog

Question

这是输出需要的内容:

.root {...}
.node {...}
.root .red .node {border-color: red;}
.root .green .node {border-color: green;}
.root .blue .node {border-color: blue;}

我希望它可以通过这种方式完成:

.root {
    // styles for .root
    ...
    .node {
        // styles for .node
        ...  
        .red & {border-color: red;} 
        .green & {border-color: green;} 
        .blue & {border-color: blue;} 
    }
}

但是 & 匹配 '.root .node' 选择器。

在一个代码块中为 .node 编写样式会很棒。对于本地选择器，是否有 & 的类似物？可能有一些“开关”允许根据父类生成样式。

Answer 1

假设 & 像在 SASS 中一样工作，它将把整个选择器链插入到那个点，所以它的行为符合预期。您需要如下内容:

.node {
    // styles for .node
    ...  
}
.root {
    // styles for .root
    ...
    .red .node {border-color: red;} 
    .green .node {border-color: green;} 
    .blue .node {border-color: blue;} 
}