打印样式表中的Sass变量覆盖"所有"样式表中的变量

Question

我使用最新的SASS/Compass版本来开发CSS.我在"media = all"样式表的开头声明了一些SASS变量,如下所示:

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

稍后在这个SCSS文件中我导入了一个打印样式表(@import'print.scss';),如下所示:

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

我想,只有当浏览器处于"打印模式"时,打印样式表中的变量才会覆盖"正常"变量.但是这些变量会覆盖总之前宣称的"正常"瓦尔.

我有点困惑,感谢任何帮助.

谢谢!

Answer 1

根据这个问题，以你目前的形式基本上是不可能的。如果你想实现这一点，你必须导入使用你的的每个样式$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}}