Geek asks and answers

Sass variables in the stylsheet control to print across all stylesheets

I use the latest versions of SASS / Compass for CSS development. I declared some SASS variables at the beginning of the "media = all" stylesheet as follows:

$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 override the "normal" vars only if the browser is in "print mode". But variables always override the "normal" vars declared earlier.

I am a little confused and appreciate any help.

Thank!

+5
source share
1 answer

, . , , $varX, :

$blue: blue;

.test{
    color: $blue;
}

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

:

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

( ), , , - , CSS.

:

$blue: blue;
$print_blue: pink;

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

:

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

More articles:


All Articles