如何使用 SASS 定义 css 选择器类前缀

Question

有没有可能写出这个结构？

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

有这个解决方案

.name-1

但仅适用于这种类型的类前缀。

例如，如果我写：

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

这将是有效的，但是当我写

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

没有什么可显示的。

Answer 1

您可以使用以下构造：

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

如需参考，请查看W3C 选择器部分。

编辑

JSFiddle 上的 CSS 版本

正如 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。等等......我认为这个列表是无止境的。无论如何，它变得非常不可读。我不建议你这样做。为什么不直接针对这些元素呢？