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