在SCSS中覆盖变量以便打印输出

Question

在SCSS中覆盖变量以便打印输出

3

你能否在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次。但是在字体大小方面，不可能在打印CSS中重新声明每个类。

因此，我正在寻找任何方法将我的$baseFontSize从12px覆盖到10pt，或者用于打印的任何大小。这样，我的CSS中的字体大小在打印时就会自动更改。

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

- Tarun

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrey Mikhaylov - lolmaus · Accepted Answer

我看不出任何问题。

假设你有一个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 元素的字体大小即可调整网站上所有字体的大小！