打印样式表中的 Sass 变量覆盖“所有”样式表中的变量答案

【问题标题】：Sass variables in print stylsheet override variables in "all" stylesheet打印样式表中的 Sass 变量覆盖“所有”样式表中的变量
【发布时间】：2013-03-15 23:09:55
【问题描述】：

我使用最新的 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;
}

我认为，如果浏览器处于“打印模式”，打印样式表中的变量仅会覆盖“正常”变量。但是这些变量确实会总是覆盖之前声明的“正常”变量。

我有点困惑，感谢任何帮助。

谢谢！

【问题讨论】：

标签： css sass compass-sass

【解决方案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}}

【讨论】：

感谢您的回答！我担心我必须做这样的事情:-(也许这个功能可能会用于下一个 SASS 版本......
@captainh2ok 这不能成为下一个版本的功能，因为服务器端 SASS 编译器无法知道浏览器将处于哪种状态。您需要将 css 的编译移动到客户端，例如 LESS用它的 less.js 来做。
@Christoph 你当然是对的。 SASS 编译器不像“人工智能”那样工作。我有时也是这样......