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

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

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

1 回答 1

2

我看不出有什么问题。

假设你有一个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元素的字体大小！

于 2013-05-02T06:07:38.483 回答