覆盖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

我没有看到任何问题。

假设你有一个​​：

$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; 

如果你的问题是，你有你包含在您的打印样式表中的屏幕样式，没有mu你可以做。你要么经历重新声明所有需要修改的麻烦，要么分离屏幕和打印样式（这也需要再次编写样式）。

但是至于字体大小，实际上有一个解决方法。

这是一个很好的做法，为html元素绝对定义字体大小，并相对于其他元素相对定义字体大小。摹：

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

html { 
    font-size: 16px; } 

html * { 
    font-size: 1em; } 

h1 { 
    font-size: 2.75em; } 

如果按照这个模式，你需要调整您的网站上所有的字体是改变html元素的字体大小！