5

CSSの開発には最新のSASS/Compassバージョンを使用しています。「media=all」スタイルシートの冒頭で、次のようにいくつかのSASS変数を宣言しました。

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

このSCSSファイルの後半で、次のような印刷スタイルシート（@import'print.scss';）をインポートします。

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

ブラウザが「印刷モード」の場合にのみ、印刷スタイルシートの変数が「通常の」変数を上書きすると思いました。ただし、変数は、以前に宣言された「通常の」変数を常にオーバーライドします。

私は少し混乱していて、助けてくれてありがとう。

ありがとう！

4

1 に答える 1

2

この質問によると、それは基本的にあなたの現在のフォームでは不可能です。これを実現したい場合は、次の$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}}
于 2013-03-26T09:21:08.313 に答える