覆盖变量以在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。因为在我所有CSS中可能有2-3个地方使用了font-family。但在字体大小的情况下。在打印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元素绝对定义字体大小，而为其余元素相对定义字体大小，例如：

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

html {
  font-size: 16px; }

html * {
  font-size: 1em; }

h1 {
  font-size: 2.75em; }

如果你遵循这个模式，你只需要改变html元素的字体大小就可以调整网站上所有字体的大小了！