Sass Variablen in Print Stylsheet überschreiben Variablen in "alle" Stylesheet

Question

Ich verwende die neuesten SASS/Compass-Versionen für die Entwicklung von CSS. Ich habe einige SASS Variablen am Anfang des deklarierten „media = alle“ Sheet wie folgt aus:

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

Später in dieser SCSS Datei i einen Druck Sheet importieren (@import ‚print.scss‘;), die aussieht wie folgt aus:

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

dachte ich, dass die Variablen im Drucksheet nur, wenn der Browser in „Druckmodus“ ist die „normale“ vars außer Kraft setzt. Aber die Variablen überschreiben immer die "normalen" vars, die vorher erklärt wurden.

Ich bin ein wenig verwirrt und freue mich über jede Hilfe.

Danke!

Answer 1

Laut this Fragen ist es in Ihrer jetzigen Form grundsätzlich nicht möglich. Wenn Sie dies erreichen wollen, dann müssen Sie jede Art importieren, die Verwendung Ihrer $varX, wie macht:

$blue: blue; 

.test{ 
    color: $blue; 
} 

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

Ausgang:

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

Es ist nicht die ideale Lösung (Sie erhalten viel wiederholten Code), aber leider ist es alles, was Sie aufgrund der Art, wie CSS funktioniert, tun können.

Dies kann eine etwas bessere Lösung sein:

$blue: blue; 
$print_blue: pink; 

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

Ausgang:

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