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;} 
    }
}

但＆amp;匹配'.root .node'选择器。

在一个代码块中为.node编写样式会很棒。有什么类似的＆amp;但对于本地选择者？可能有一些“开关”允许根据父类生成样式。

Answer 1

假设＆amp;在SASS中工作，它将整个选择器链插入到该点，因此它的行为符合预期。您需要以下内容：

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

Answer 2

如果您想将.node代码放在一起，那么您需要重复.root，如下所示：

.root {/*root only*/}
.node {
  /*node only*/
  .root .red & {border-color: red;}
  .root .green & {border-color: green;}
  .root .blue & {border-color: blue;}
}

但问题是，你真的需要那种特异性吗？换句话说，如果html中的.root内始终存在.node，或者至少如果.root重复.root，则以下内容也可以正常运行 .node不会影响.node的着色，.root内是否存在.root {/*root only*/} .node { /*node only*/ .red & {border-color: red;} .green & {border-color: green;} .blue & {border-color: blue;} }。有时在开发人员希望与LESS“嵌套”时，可能会忘记嵌套获得的选择器的额外特性可能是多余的。

{{1}}

少＆amp;相对选择器的模拟

2 个答案: