[Solved] SCSS Change Variable depending on parent class

[fede]

I’ll try to explain this as simple as possible.

I’ve defined my vars on a scss partial. What I would like to do is that if that if add a class to the body ex:

That color variable would change to a different color.

$primary-color:#123123;

.theme2 { $primary-color: #654654; }

[Paulie_D]

$primary-color is a value not a css property…so that won’t work.

[chrisburton]

Someone may be able to correct me here but I believe you can do if statements in SCSS.

[Paulie_D]

SaSS yes…and so I assume SCSS

http://thesassway.com/intermediate/if-for-each-while

[fede]

@paulie_d : I figured it wasn’t possible how I presented it when I tested it,before I wrote this post, thanks for your proactive response.

@chrisburton : Im not that used to IF Statements, and was wondering maybe somebody already ran into this issue before and was able to work out a clever solution for this. Thanks for mentioning it, I’ll look into it.

Basically I’m trying to have sections with different colors, without writing the CSS twice. Using the same base code from the main section.

[Alen]

$base-color: red;
.el{
    background-color: $base-color;
}
.ex{
    @if $base-color == red {
        $base-color: green;
        background-color: $base-color;
    }
}

Compiles to:

.el {
  background-color: red; }

.ex {
  background-color: green; }

[Alen]

Basically I’m trying to have sections with different colors, without writing the CSS twice. Using the same base code from the main section.

I don’t see the point of re-declaring variables. If you have 10 different colors you have to use, it’s better to have 10 variables, instead of changing the base value down the chain. What if you need to change all the colors? You would have to go trough the chain and figure out all the spots you’ve re-declared the variable and change it there. What you should be doing is just change the value the variable contains.

Can you explain your issue in greater detail, so that we can suggest possibly better alternatives. The path you’re about the embark on is very messy.

[Alen]

You could use @extend.

$blue-color: blue;
$red-color: red;
$green-color: green;
.base-box{
    display:block;
    width: auto;
    color: $blue-color;
}
.base-box-1{
    @extend .base-box;
    color: $red-color;
}
.base-box-1{
    @extend .base-box;
    color: $green-color;
}

Compiles to:

.base-box, .base-box-1 {
  display: block;
  width: auto;
  color: blue; }

.base-box-1 {
  color: red; }

.base-box-1 {
  color: green; }

[Alen]

http://codepen.io/alenabdula/pen/BnAth

[fede]

Hey @Alen, thanks for the sugestion. That would work great.

For now what I did was create 2 .scss files and on each load a different partial with a set of variables. Then I just compiled two different files for each template. The reason that works for me better is because the code is all written already and this would minimize the workload(the color variable is used on all kinds of elemtns ). I can still use the same base, for all the templates and just compile using different variables into different global files. I realise this creates 2 different files and kind defeats the purpose of the whole thing. I know its not elegant, but I think that for a project that is more than 70% done, this is the easiest and maintainable approach.

That said, Im going to try to implement your technique on other projects and see how that works. Thank you very much for taking time to check this out and write the PENs, its been a lot of help and I’ve learned a lot today. Cheers

[sohushah]

i have some css like

a{
color:$primary-bg-color;
color:$primary-color;
}

if my body has class “dark” then $primary-bg-color will be set to #000 else if body has the class “light” then $primary-bg-color will be set to #fff…How may i achieve this?

[Ilan Firsov]

You can’t change variables based on classes since the SASS compiler can’t know which classes are used in your html (maybe there are compilers who check the html but I’m not aware of any)
One option would be to create 2 separate stylesheets for light and dark themes. You may be able to just change the variables file and import the rest of your components like normally done

light-theme.scss:
@import '_light_vars.scss';
@import 'components/navbar.scss';
@import 'components/whatever.scss';
...

dark-theme.scss:
@import '_dark_vars.scss';
@import 'components/navbar.scss';
@import 'components/whatever.scss';
...

Then in code where you decide whether to add dark class or not, conditionally load the stylesheet you need.
Though you will have to update 2 main files when adding/removing components or other styles. Maybe even create another file for the other components and include it instead of each component individually.

[cheetara63]

Hi there!
I just found myself in some similar situation where I wanted to change sass variables according to a parent class. I read here that it isn´t possible but maybe you can help me to come up with some elegant solution.

I have a website translated to several languages, including arabic. The characters in the arabic font are much smaller than the regular (latin) fonts, which makes it difficult to read. I cannot change the fonts, so I have to increase the font-size for the arabic version (which has the lang-ar class in the body).

So far I have a file with :

body.lang-ar {
   ..... a whole bunch of classes ..... { 
    font-size: $fs_normal_ar; 
   }
}

, but this doesn´t seem right to me. I have several font-size variables (fs_small, fs_normal, fs_big) and I wanted to add 10px to every variable whenever I am in the arabic version.

Changing the base font size in the html element (a percentage font-size) will not do since everything is in rem units (widths, heights, etc) and it ruins all the layout.

I was thinking about doing a mixin like:

@mixin calc_fs($value) {
  font-size: ($value) rem;
  .lang-ar & {
    font-size: ($value+10px) rem;
  }
}

but I guess this won´t work everytime because of the nesting.
So… do you have any hint for me? How would you do it?

I´m sure there is no perfect/easy solution, but there should be a better one than the ones I´ve come up with. I don´t mind having to change a bunch of code, if in the end I get a clean and maintainable solution.

Thanks for the help!

[Author]

Posts