Variabili Sass nelle variabili di sostituzione foglio stile di stampa nel foglio di stile "tutti"

Question

Uso le ultime versioni di SASS/Compass per lo sviluppo di CSS. Ho dichiarato alcune variabili SASS all'inizio della "media = all" foglio di stile come questo:

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

avanti in questo file SCSS ho importare un foglio di stile di stampa (@import 'print.scss';) che sembra in questo modo:

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

ho pensato, che le variabili del foglio di stile di stampa sovrascrive il "normale" vars solo se il browser è in "modalità di stampa". Ma le variabili sostituiscono sempre le "normali" vars dichiarate in precedenza.

Sono un po 'confuso e apprezzo qualsiasi aiuto.

Grazie!

Answer 1

Come per le domande this, in pratica non è possibile nel modulo attuale. Se si vuole raggiungere questo obiettivo, si dovrà importare ogni stile che fa uso del $varX, come:

$blue: blue; 

.test{ 
    color: $blue; 
} 

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

uscita:

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

Non è la soluzione ideale (si otterrà un sacco di codice ripetuto), ma sfortunatamente è tutto quello che puoi fare a causa del modo in cui il CSS funziona.

Questa può essere una soluzione leggermente migliore:

$blue: blue; 
$print_blue: pink; 

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

uscita:

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