応答的な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; 
    } 
} 

、テーラーあなたのニーズに。