打印樣式表中的Sass變量覆蓋「全部」樣式表中的變量

Question

我使用最新的SASS/Compass版本來開發CSS。我已經聲明在開始時有些SASS變量「媒體=所有」樣式表是這樣的：

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

在此SCSS文件導入我的打印樣式表（@import「print.scss」;），後來它看起來像這樣：

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

我想，這在打印樣式表中的變量覆蓋「正常」瓦爾只有如果瀏覽器中的「打印模式」。但變量確實覆蓋了總是之前聲明的「正常」變量。

我有點困惑，並感謝任何幫助。

謝謝！

Answer 1

根據this的問題，目前的形式基本上是不可能的。如果要實現這一點，你就必須導入，使你的$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}}