CODEWITHSUNDEEP
cssvariablessassmixins
Alejandro Lora
Alejandro Lora

Reputation: 7802

SASS - change value of variable to use it in two classes

I have been trying to create a variable called like "$active" and then, it depends of the class where we are, it's changing this value. But it doesn't work. Show you the code

$active : #000 !default;

.class-1 {
   $active : red;
}
.class-2 {
   $active : green;
}

.class-1, .class-2 {
   color: $active;
}

So, in this way, what I though is changing the value depending of the class we are, then, apply this color for the class. The thing is, I have a lot of code under those two classes, I can not assign the color without the comma, otherwise I will repeat to much code.

Also, I discovered something really weird and it can be the key why is not working, in the code, if i write like this:

$active : #000 !default;

.class-1 {
   $active : red;
   color : $active; // Here it's working, red!
}
.class-2 {
   $active : green;
   color : $active; // Here it's working, green!
}

.class-1, .class-2 {
   color: $active; // No way to make it works! :(
}

Do you have any idea? Any suggestion is welcome, Thanks!

Btw, I already tried with Mixins and functions, but it's the same...

--- EDIT ---

I think I wasn't clear enough, sorry. I just created a pen for this example, with comments and everything to try to be clearer. From my point of view, it happen that I am overriding the variable value not in the global context, but not sure if it's like that...

http://codepen.io/ialex90/pen/RaEyWx

Upvotes: 0

Views: 692

Answers (2)

maxinacube
maxinacube

Reputation: 661

I forked your pen and made a couple of small adjustments.

My approach here is this:

Don't reset $activeColor to a new color, it's just not necessary. What you do instead of set $user and $admin directly, skipping the setting on $activeColor. When you set the background color to the div, set the color as well.

.panel-user {
    background-color : darken( $user, 20% );
    color: $user;
}

.panel-admin {
    background-color : darken( $admin, 20% );
    color: $admin;
}

Then in your pen where you are setting colors, change them to inherit. So your saying, "Admin background is a darker shade of lightBlue, and the color is lightBlue. Now text stuff inside of .panel, inherit your color from the parent."

.panel {
    a {
        color : inherit;
    }
}

This should illustrate what I mean, http://codepen.io/maxinacube/pen/bpOXyX?editors=0100

Also, it's best not to get too specific on your selectors. After setting the color on the parent item, the span and .good-bye actually inherit the color by default. So all you really need to force inheriting the style is the a. Of course, this may change depending on what other styles creep up as you develop but it's best to keep things simple so you're not making diesel selectors or using !important to overwrite things in the future.

Upvotes: 1

t1m0n
t1m0n

Reputation: 3431

You could use array of colors, and set individual color while looping this array:

$colors: red, blue, orange;

@for $i from 1 through length($colors) {
  .color-#{$i} {
    color: nth($colors, $i)
  }
}

.color-1, .color-2 {
  color: #000;
}

It will compiles in:

.color-1 {
  color: red;
}

.color-2 {
  color: blue;
}

.color-3 {
  color: orange;
}

.color-1, .color-2 {
  color: #000;
}

Upvotes: 0

Related Questions