CODEWITHSUNDEEP
sass
AlexForm
AlexForm

Reputation: 77

sass @if statement based on a class

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.

Upvotes: 1

Views: 2612

Answers (3)

potench
potench

Reputation: 3842

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;
}

Upvotes: 3

Douglas Denhartog
Douglas Denhartog

Reputation: 2054

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
}

Upvotes: 0

Vangel Tzo
Vangel Tzo

Reputation: 9313

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;
}

Upvotes: 0

Related Questions