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;

如果问题在于您的打印样式表中包含您的屏幕样式，那么您无能为力。您要么已经完成了重新声明所有需要修改或分离屏幕和打印样式（这也需要再次编写样式）的麻烦。

但至于font-size，实际上有一种解决方法。

最好为html元素绝对定义font-size，对其余元素相对定义，e。 G：

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

html {
  font-size: 16px; }

html * {
  font-size: 1em; }

h1 {
  font-size: 2.75em; }

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

在SCSS中覆盖打印变量

1 个答案: