Set a SASS variable depending
<p>I'm searching a way to use a particular color depending on a class on the body tag.</p>

<p>I have a main scss file like this</p>

<pre><code>// variables.scss
$bg-main:      white;
$color-first:  red;
$color-second: green;
</code></pre>

<p>And in my other files, I use the colors</p>

<pre><code>// content.scss
.content {
     .some-selector: {
         // some styles
         color: $color-second;
     }
     a:hover {
         // some styles
         color: $color-second;
     }
}    

// and same goes for menu.scss etc.
</code></pre>

<p>Now I have a dynamic class on the body, that changes depending on the current selected menu. I would like $color-second to be different for each body classes, and I don't know how to do that. The only solution I found was to move all the $color-second from each files into one single file, like this:</p>

<pre><code>.body-1 {
    .content a:hover, .content .some-selector {
        color: green;
    }
}
.body-2 {
    .content a:hover, .content .some-selector {
        color: blue;
    }
}
.body-1 {
    .content a:hover, .content .some-selector {
        color: black;
    }
}
</code></pre>

<p>So I don't need to write the color in each files. This works well, but if I need to set this $color-second to some other selector, I need to put that in this big file.</p>

<p>Is this possible to do this an other way?</p>

<p>I already checked these answers, but it didn't helped me much:</p>

<ul>
<li><a href="https://stackoverflow.com/questions/18112238/sass-set-variable-depending-on-css-class">SASS set variable depending on CSS class</a></li>
<li><a href="https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass">Creating or referencing variables dynamically in Sass</a></li>
<li><a href="https://stackoverflow.com/questions/15788112/merge-string-and-variable-to-a-variable-with-sass">Merge string and variable to a variable with SASS</a></li>
</ul>