Sass variables in print stylsheet override variables in "all" stylesheet

Question

I use the latest SASS/Compass versions for developing CSS. I've declared some SASS variables at the beginning of the "media=all" stylesheet like this:

$var1: red;
$var2: blue;
$var3: black;
$var4: green;

Later in this SCSS file i import a print stylesheet (@import 'print.scss';) which looks like this:

@media print {
   $var1: black;
   $var2: black;
   $var4:black;
}

I thought, that the variables in the print stylesheet overrides the "normal" vars only if the Browser is in "print mode". But the variables do override always the "normal" vars declared before.

I'm a little confused and appreciate any help.

Thanks!

Answer 1

As per this questions, it's basically not possible in your current form. If you want to achieve this, you'll have to import each style that makes use of your $varX, like:

$blue: blue;

.test{
    color: $blue;
}

@media print {
    $blue: pink;
    .test{
        color: $blue;
    }
}

output:

.test{color:blue}@media print{.test{color:pink}}

It's not the ideal solution (you'll get lots of repeated code), but unfortunately it's all you can do due to the way CSS works.

This may be a slightly better solution:

$blue: blue;
$print_blue: pink;

.test{
    color: $blue;
    text-align: right;
    @media print {
        color: $print_blue;
    }
}

output:

.test{color:blue;text-align:right}@media print{.test{color:pink}}