Zmienne Sass w arkuszu stylów zastępują zmienne w "całym" arkuszu stylów

Question

Używam najnowszych wersji SASS/Compass do tworzenia CSS. Mam zadeklarowane zmienne Sass Na początku wszystko „mediach =” stylesheet tak:

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

Później w tym pliku SCSS importować arkusza stylów wydruku (@import „print.scss”;), która wygląda tak:

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

Myślałem, że zmienne w arkuszu stylów wydruku nadpisuje „normalny” vars tylko jeśli przeglądarka jest w trybie „druku”. Jednak zmienne zastępują zawsze "normalne" vary zadeklarowane jako .

Jestem trochę zdezorientowany i doceniam każdą pomoc.

Dzięki!

Answer 1

Jak na pytania this, zasadniczo nie jest to możliwe w twojej obecnej formie. Jeśli chcesz, aby to osiągnąć, trzeba będzie importować każdy styl, który sprawia, że ​​korzystanie z Twojej $varX, jak:

$blue: blue; 

.test{ 
    color: $blue; 
} 

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

wyjściowa:

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

To nie jest idealnym rozwiązaniem (dostaniesz dużo powtórzonego kodu), ale niestety to wszystko, co możesz zrobić ze względu na sposób działania CSS.

To może być nieco lepsze rozwiązanie:

$blue: blue; 
$print_blue: pink; 

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

wyjściowe:

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