印刷用スタイルシートのSass変数は "all"スタイルシート内の変数を上書きします

Question

最新のSASS/CompassバージョンをCSSの開発に使用します。見えている;（@import「print.scss」）

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

その後、このSCSSファイルで、私は印刷スタイルシートをインポートします。私はこのような「メディア=すべての」スタイルシートの先頭にいくつかのSASS変数を宣言しましたこのように：

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

私は印刷スタイルシート内の変数は、ブラウザの「印刷モード」であれば「通常は」のみをvarsの上書きされますことを、考えました。しかし変数は、を常に上書きします。前に宣言された "正常な"変数は、です。

私はちょっと混乱しており、助けてくれてありがとうございます。

ありがとうございます！

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}}