5

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!

captainh2ok
  • 115
  • 1
  • 8

1 Answers1

2

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}}
Community
  • 1
  • 1
Prisoner
  • 27,391
  • 11
  • 73
  • 102
  • Thanks for your answer! I've feared that i have to do something like this :-( Maybe this feature could something be for the next SASS Version... – captainh2ok Mar 26 '13 at 09:37
  • 1
    @captainh2ok this cannot be a feature for the next version because the serverside SASS compiler cannot know which state the browser will be in. You would need to move the compilation of the css to the clientside like LESS is doing it with it's less.js. – Christoph Mar 26 '13 at 10:04
  • 1
    @Christoph You are certainly right. The SASS compiler works not like an "artificial intelligence". And so do i sometimes... – captainh2ok Mar 26 '13 at 11:08