覆盖用于在SCSS中打印的变量

是否可以覆盖SCS中的变量以进行打印

我有一些变量：

$baseFontSize    : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif    : Times, "Times New Roman", serif;

例如，我想覆盖它进行打印

$baseFontSize    : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif    : Georgia, Serif;

在字体系列的情况下，我们可能会创建不同的变量$defaultPrintSansSerif，并再次为打印定义css。因为字体系列可能在我所有CSS中的2-3个位置使用。但在字体大小的情况下。不可能在打印css中再次声明每个类

所以我正在寻找任何方法来覆盖我的$baseFontSize，从12px到10pt，或者打印的任何大小。因此，打印CSS中的字体大小将自动更改。 即

---

我看没什么问题

假设您有一个

base/\u变量。scss

：

$baseFontSize    : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif    : Times, "Times New Roman", serif;
$headerBackground: red;
$someOtherStuff  : foo;

您可以从以下内容开始

屏幕.scss

：

@import "base/_variables.scss";

@import "base/_variables.scss";

$baseFontSize    : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif    : Georgia, Serif;

以及您的

print.scss

：

@import "base/_variables.scss";

@import "base/_variables.scss";

$baseFontSize    : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif    : Georgia, Serif;

如果您的问题是打印样式表中包含了屏幕样式，那么您就无能为力了。您要么经历了重新阐明所有需要修改的内容的麻烦，要么分离了屏幕和打印样式（这也需要再次使用书写样式）

但是对于字体大小，实际上有一个解决办法

最好的做法是为

html

元素定义绝对的字体大小，而为其余元素定义相对的字体大小，例如。g、 :

/* Enabling inheritance of everything */
@import "compass/reset";

html {
  font-size: 16px; }

html * {
  font-size: 1em; }

h1 {
  font-size: 2.75em; }

---

如果您遵循此模式，则只需更改

html

元素的字体大小即可调整网站上所有字体的大小

我把它们都放在同一个文件里，因为我不想把所有的东西都重写出来打印。在打印CSS中，我只有一些类要覆盖，其他类将保持原样。在第二种情况下，是的，最好使用em，但如果我为父级定义特定的字体大小，它也会影响子级。为了解决em问题，我们增加了一个单位REM，但它不适用于所有浏览器：(