Overwrite variables for print in SCSS - css

Question

Is it possible to overwrite variables in SCSS for print?
I've some variables:
$baseFontSize : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif : Times, "Times New Roman", serif;
I want to overwrite it for print for example
$baseFontSize : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif : Georgia, Serif;
In font family case we may create different variable $defaultPrintSansSerif and define css again for print. Because font-family might be use in 2 - 3 places in my all CSS. But in case of font-size. It's not possible to declare every class again in print css.
So i'm look for any way to overwrite my $baseFontSize from 12px to 10pt, or whatever size for print is. So font size in my CSS for print will change automatically.
ie.
Calculation SCREEN CSS PRINT CSS
$baseFontSize 12px 10pt
$baseFontSize * 2 24px 20pt
$baseFontSize * 3/2 18px 15pt

Answer 1

I don't see any problem.
Say you have a base/_variables.scss:
$baseFontSize : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif : Times, "Times New Roman", serif;
$headerBackground: red;
$someOtherStuff : foo;
You begin your screen.scss with:
#import "base/_variables.scss";
And your print.scss with:
#import "base/_variables.scss";
$baseFontSize : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif : Georgia, Serif;
If your problem is that you have your screen styles included in your print stylesheet, there's not much you can do. You either have go through the nuisance of redeclaring all that require modification or separate the screen and print styles (which also requires writing styles again).
But as for the font-size, there's actually a workaround.
It is a good practice to define font-size absolutely for the html element and relatively for the rest, e. g.:
/* Enabling inheritance of everything */
#import "compass/reset";
html {
font-size: 16px; }
html * {
font-size: 1em; }
h1 {
font-size: 2.75em; }
If you follow this pattern, all you need to resize all the fonts on your website is to change the font-size of the html element!