Выбор класса в Sass

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

Вот несколько способов написания SASS, которая будет генерировать 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; 
      } 
     } 
    } 

Вообще псевдо элемент должны быть в конце селектора и сами не имеют классов. Сасс сделает это, когда вы его напишете. Я не уверен, с чем будет работать браузер.

Псевдоэлементы также обычно имеют свойство content, и стили применяются. Css выше не будет применяться, если свойство content не установлено где-либо еще в вашем css.

Это манипуляция ::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(); 
}