CODEWITHSUNDEEP
csssasscss-selectors
panthro
panthro

Reputation: 24099

Selecting a class in Sass

I have a form which has a label on each input:

<label>My Label</label>

I style it with:

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

I add a class to each label:

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

How can I select the before for each class in Sass?

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

Please note, the reason I use the ::before selector is for something more complex than changing a labels background colour, I have just used this as a simple example.

Upvotes: 0

Views: 452

Answers (2)

ishmael.ahmed
ishmael.ahmed

Reputation: 71

Here are a couple ways of writing SASS that will 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 a pseudo element needs to be at the end of a selector, and don't themselves have classes. Sass will render it as you write it. I am not to sure what the browser will do with.

Pseudo elements also usually have a content property, and it is that the styles are applied. The css above will not be applied unless a 'content' property is set somewhere else in your css.

It is the manipulation of the ::before and ::after that you get your standard clearfix solution you'll find in bootstrap[http://getbootstrap.com/css/#helper-classes-clearfix]

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

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

Upvotes: 1

OxyDesign
OxyDesign

Reputation: 754

You need to write it like that :

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

If you use your version you will have label:before.blue instead of what you want label.blue

Upvotes: 0

Related Questions