jeudi 18 juin 2015

Change a SCSS Variable based on CSS class

I have a series of a tags that form a grid (each a is a block with the class .portfolio-grid-item).

Each .portfolio-grid-item contains several div and heading elements and uses a default color via a variable ($grid-color: $blue;).

I am trying to create a SCSS rule that will do the following:

  • Check if an additional class is assigned to the a tag.
  • If there is an additional class, replace the default color variable with a new one.
  • If not, fallback to the default.

e.g.

An element classed as .portfolio-grid-item .orange should, replace $grid-color: $blue with $grid-color: $orange;

I have tried using an mixin with an if statement, but I have never done this before and I am not sure if the method is correct, or supported.

My Pen is here: http://ift.tt/1Fo7Jst

Any advice would be really appreciated!

Aucun commentaire:

Enregistrer un commentaire