less font-sizeをremで汎用的に使いこなす
emや%のようにサイズを相対的に指定すると、親要素の影響を受けてしまうのでサイズの計算が難しくなってしまいます。
css3ではrem（root em）という単位でルートの要素（<html>）のサイズに対しての相対的な値を指定できるようになりました。
その便利なremをlessのミックスインを使って便利に使いこなす方法を紹介します。
ルートのサイズの定義
最初にルート要素<html>のサイズを定義します。このサイズがページ全体の基準のサイズとなります。
html {
font-size: 62.5%;
}62.5%と指定すると、ベースのサイズが10pxになるため、計算がとても簡単になります。
例えばある要素のフォントサイズを16pxにしたい場合は10pxに対して1.6倍なので1.6remとなります。
font-sizeミックスインの作成
// ミックスイン
.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size: @font-size * 1px; // IE8などのフォールバック
font-size: ~"@{rem}rem";
}
// lessで実装
.foo {
.font-size(16);
}
// コンパイル後
.foo {
font-size: 16px;
font-size: 1.6rem;
}フォントサイズはこのようにして実装しておけば、ページ全体の文字サイズを調整したい場合はルート要素<html>のサイズを調整するだけでよくなります。