在萨斯

Question

选择一类我有这对每个输入标签的形式：

<label>My Label</label> 

我的风格它：

label { 
    &:before { 
     background-color: red; 
    } 
} 

我一个类添加到每个标签：

<label class="blue">My Label</label> 
<label class="yellow">My Label</label> 

如何在Sass中为每个课程选择前？

label { 
    &:before { 
     background-color: red; 
     &.blue { 
       background-color: blue; //??????? 
     } 
    } 
} 

请注意，我之所以用::before选择的东西是不是改变一个标签背景颜色比较复杂，我刚刚用这个作为一个简单的例子。

Answer 1

你需要把它写这样的：

label { 
    &:before { 
    background-color: red; 
    } 
    &.blue{ 
    background-color:blue; 
    } 
} 

如果您使用的版本，你将有label:before.blue，而不是你想label.blue

Answer 2

什么这里是写上海社会科学院，将产生label:before的几种方法，label.blue:before，label.yellow:before

label { 
     &:before{ 
      background-color:red; 
     } 
     &.blue:before{ 
      background-color: blue; 
     } 
     &.yellow:before{ 
      background-color:yellow; 
     } 
    } 


    label { 
     &:before{ 
      background-color:red; 
     } 
     &.blue{ 
      &:before{ 
        background-color: blue; 
       } 
      } 
     &.yellow{ 
      &:before{ 
       background-color:yellow; 
      } 
     } 
    } 

通常伪元件需要在选择器的末尾，并且本身没有类。 Sass会在你写下它的时候渲染它。我不确定浏览器会做什么。

伪元素通常也具有content属性，并且是应用样式。上面的css将不会被应用，除非你的css中的其他地方设置了'content'属性。

它是::before和::after的，你得到你的标准clearfix解决方案，您将在引导[找到操纵http://getbootstrap.com/css/#helper-classes-clearfix]

// Mixin itself 
.clearfix() { 
    &:before, 
    &:after { 
    content: " "; 
    display: table; 
    } 
    &:after { 
    clear: both; 
    } 
} 

// Usage as a Mixin 
.element { 
    .clearfix(); 
}