css - Selecting a class in Sass -

i have form has label on each input:

<label>my label</label> 

i style with:

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

i add class each label:

<label class="blue">my label</label> <label class="yellow">my label</label> 

how can select before each class in sass?

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

please note, reason use ::before selector more complex changing labels background colour, have used simple example.

here couple ways of writing sass generate 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;             }         }     } 

generally pseudo element needs @ end of selector, , don't have classes. sass render write it. not sure browser with.

pseudo elements have content property, , styles applied. css above not applied unless 'content' property set somewhere else in css.

it manipulation of ::before , ::after standard clearfix solution you'll find in bootstrap[http://getbootstrap.com/css/#helper-classes-clearfix]

// mixin .clearfix() {   &:before,   &:after {     content: " ";     display: table;   }   &:after {     clear: both;   } }  // usage mixin .element {   .clearfix(); }