응답 성있는 Sass 변수

Question

그래서 px를 em으로 변환하는 함수를 만들었습니다. 기본값은 변수 $base-font-size을 사용하는 것입니다. 그렇다면 브라우저 너비에 따라 변수를 변경하려면 따라야 할 가장 좋은 방법은 무엇입니까? 그게 가능하니? 변수를 변경하면 함수를 호출하는 모든 위치가 다시 계산됩니까?

@function em($pixels, $context: $base-font-size) { 
    @return ($pixels/$context) * 1em; 
} 

아니면이 함수를 호출하는 모든 곳에서 다시 호출해야합니까? 감사합니다

Answer 1

개인적으로 나는 응용 프로그램의 기본 글꼴 크기를 변경하지 않고 값을에 기초하여 미디어 쿼리를 사용하여 설정합니다. 예를 들어

:

$base-font-size: 14px; 

@function em($pixels, $context: $base-font-size) { 
    @return ($pixels/$context) * 1em; 
} 

* { 
    font-size: em(12px); 
    @media (min-width: 300px) { 
     font-size: em(16px); 
    } 
    @media (min-width: 640px) { 
     font-size: em(14px); 
    } 
    @media (min-width: 980px) { 
     font-size: em(12px); 
    } 
} 

같은 무언가로 컴파일합니다 : 분명히

* { 
    font-size: 0.85714286em; 
} 
@media (min-width: 300px) { 
    * { 
    font-size: 1.14285714em; 
    } 
} 
@media (min-width: 640px) { 
    * { 
    font-size: 1em; 
    } 
} 
@media (min-width: 980px) { 
    * { 
    font-size: 1.14285714em; 
    } 
} 

, 맞춤형 사용자의 요구에.