在薩斯

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(); 
}