覆盖 SCSS 中的打印变量

Question

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

我有一些变量：

$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 以进行打印。因为 font-family 可能在我所有的 CSS 中的 2 - 3 个地方使用。但在字体大小的情况下。在 print css 中不可能再次声明每个类。

所以我正在寻找任何方法将我的 $baseFontSize 从 12px 覆盖到 10pt，或者任何打印尺寸。所以我的 CSS 中用于打印的字体大小会自动改变。 即。

Calculation             SCREEN CSS                PRINT CSS
$baseFontSize           12px                      10pt
$baseFontSize  * 2      24px                      20pt
$baseFontSize  * 3/2    18px                      15pt

Answer 1

我没有发现任何问题。

假设你有一个base/_variables.scss：

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

您的screen.scss 开头为：

@import "base/_variables.scss";

还有你的print.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 元素的字体大小！