如何使用 SASS 定义 CSS 选择器类前缀答案

【问题标题】：How to define css selector class prefix with SASS如何使用 SASS 定义 CSS 选择器类前缀
【发布时间】：2014-02-21 12:00:04
【问题描述】：

有没有可能写这个结构？

[class^="name"]{ 
   &[class*="-1"]{
       padding: 10px;
   }
}

有这个解决方案

.name-1

但仅限于这种类型的类前缀。

例如，如果我写：

<span class="name-1"></span>

这会起作用，但是当我写的时候

<span class="othervalue-1"></span>

没有什么可显示的。

【问题讨论】：

你写的东西不起作用？它会生成什么 CSS？
你为什么要这样做？

标签： css class sass selector

【解决方案1】：

您可以使用以下构造：

[class^="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

如需参考，请查看W3C Selectors section。

编辑

CSS Version on JSFiddle

正如 Beterraba 所说，这也将匹配 .nameother-1。为避免这种情况，请使用以下内容：

[class|="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

如果你例如想要匹配 .name-1-2 你可以执行以下操作：

[class|="name"]{ 
   color: red;

   &[class*="-1"]{
       padding: 10px;
       color: green;

       &[class$="-2"]{
           padding: 30px;
           color: yellow;
       }  

   } 
}

但这也将匹配.name-15-2。为了避免这种情况，你需要做这样的事情：

[class|="name"]{ 
    color: red;

   &[class$="-1"]{
       padding: 10px;
       color: green;
   } 

   &[class$="-1-2"]{
       padding: 30px;
       color: yellow;
   }     
}

但这也将匹配name-5-1-2。等等..我认为这个列表是无穷无尽的。无论如何，它变得非常难以理解。我不建议你这样做。为什么不直接针对这些元素？

【讨论】：

好的，但是如果我还有其他选项，例如 &[class$="-2"] 和类构造将是 .name-1-2 或 .name-2-1 ？
它将匹配nameother-1
这不会改变任何东西:(
@Lukas 你想针对哪个班级？ .name-1-2?
是的，我需要上课 .name-1-2 或 .name-2-1 但如果我写 .othername-1-2 这将只适用于第一种组合

【解决方案2】：

使用 Sass，您可以使用变量并在选择器中使用它们。这样，您可以将前缀用作变量并嵌套要选择的后缀。

假设您的前缀是name，您要选择的后缀是-1，但您不想选择othername-1。您可以执行以下操作：

$prefix: name
.#{$prefix}
    &-1
        padding: 10px

    &-other_selected_suffix
        color: green

此代码将同时选择name-1 和name-other_selected_suffix，但不会选择othername-1

【讨论】：