Question

我在文档上找不到任何内容，但我有一个选择器，通常是这样的：

.a > .b > .c, .a > .d > .c { color: red }

你可以看到我实际上在重复整个选择器。是否有类似的东西：

.a > (.b, .d) > .c { color: red }

还是真的阻止我重复大多数选择器的事情？我必须使用mixin吗？

Answer 1

您提出的伪代码有效。您只需将其转换为SCSS语法即可。像这样：

.a{
   > .b, > .d{
     > .c{
        color: red;
     }
   }
}

利用SCSS嵌套属性;）

编辑：参考mixin的想法。

你可以在技术上将任何东西变成混合物。您必须问自己的问题是，这是我将在整个网站中使用的常见结构吗？如果你要重复这个相同的abc，adc特异性路径很多，但你基本上改变了颜色，然后是，变成mixin($color:$argument)并使用$argument根据需要将颜色传递给$color变量

@mixin changing-color($color){
   color: $color;
}

.a{
   > .b, > .d{
     > .c{
        @include changing-color(red);
     }
   }
}

SCSS中间选择器“或”

1 个答案: