sass @if statement based on a class

Question

Can I somehow make use of a static class inside sass to style child elements based on a color variable defined?

Let's say I have a class named red, and I want to define a variable called $color: classname; or $color: #ff0000; based on that class.

If class is red then define an existing variable with a custom color so I can reuse that variable everywhere inside my scss files based on what class I have on the container.

Note that I have a limited number of colors that I need, and can define them inside sass.

So if there is a class of `notsogreen` you want a variable like `$color: notsogreen;`, right? I don't think that's possible. — kleinfreund, Jan 23 '14 at 19:12
possible duplicate of [SASS @each with multiple variables](http://stackoverflow.com/questions/6572588/sass-each-with-multiple-variables) — cimmanon, Jan 23 '14 at 21:28

potench · Accepted Answer · 2014-01-23T19:33:37.743

3

Is this what you're looking for?

$colors : (red, blue, green); // array of colors

@each $color in $colors {     
    .#{$color} {  
       color: $color;
    }
}

The output of the above SASS is

.red { 
   color: red;
}

.blue { 
   color: blue;
}

.green { 
   color: green;
}

edited Jan 23 '14 at 19:33

answered Jan 23 '14 at 18:19

potench

3,802
1
28
39

Yes this is the closest I can get with what I want, it seems that I need to put some muscle in it. Thank you. – AlexForm Jan 24 '14 at 09:50

score 0 · Answer 2 · answered Jan 23 '14 at 17:53

0

If I understand correct your problem You could use a class red and extend this class when you need it.

$red: #FF0000;

.red {
  color: $red;
}

.div {
  @extend .red;
}

answered Jan 23 '14 at 17:53

Vangel Tzo

8,885
3
26
32

Yes I know I can do this but, I want only 1 variable for all places in my scsss file that I define the color based on a class. The way you proposed it I need to have let's say 4 variables with different colors on every child element i want to style. – AlexForm Jan 23 '14 at 17:58

score 0 · Answer 3 · answered Jan 23 '14 at 18:16

0

I believe what you are trying to do is:

In an example file called "base.scss":

$red: red;/*this could be a HEX, RGB, whatever*/
@import "other"

In the example file called "other.scss":

div
{
    color: $red
}

answered Jan 23 '14 at 18:16

Douglas Denhartog

2,036
1
16
23

sass @if statement based on a class

3 Answers3