SCSS에서 인쇄를 위해 변수 덮어 쓰기

Question

인쇄용 SCSS의 변수를 덮어 쓸 수 있습니까?

나는 몇 가지 변수를했습니다 :

$baseFontSize : 12px; 
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif; 
$defaultSerif : Times, "Times New Roman", serif; 

나는 우리가 다른 변수 $ defaultPrintSansSerif을 만들 수 있습니다 폰트 패밀리 경우 예를

$baseFontSize : 10pt; 
$defaultSansSerif: "Courier New", Courier, monospace; 
$defaultSerif : Georgia, Serif; 

에 대한 인쇄를 위해 그것을 덮어 쓰기 및 인쇄 다시 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; 

문제는 당신이 가지고있는 경우 인쇄 스타일 시트에 포함 된 스크린 스타일, mu가 없습니다. 너 할 수있어. 수정이 필요하거나 화면과 인쇄 스타일을 분리해야하는 재 선언의 불편을 겪었거나 (스타일 재 작성이 필요함)

글꼴 크기는 실제로 해결 방법이 있습니다.

html 요소에는 글꼴 크기를 절대적으로 정의하고 나머지 요소에는 상대적으로 글꼴 크기를 절대적으로 정의하는 것이 좋습니다. 이 패턴을 따르는 경우 g는 :

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

html { 
    font-size: 16px; } 

html * { 
    font-size: 1em; } 

h1 { 
    font-size: 2.75em; } 

, 당신이 당신의 웹 사이트에있는 모든 글꼴의 크기를 조정해야 모두가 html 요소의 글꼴 크기를 변경하는 것입니다!