計算が面倒なrem単位について、Sassの関数を用いてpxのごとく直感的に扱う方法を紹介します。
前提としてSassを使える環境が必要です。
そのような環境がまだないという方は、GulpでSassを含むタスクランナーを比較的簡単に導入できる方法も別の記事で書いていますので、是非この機会にやってみてください。
【30分で構築完了】Gulpの導入方法と使い方(for Mac)
Gulpって便利そうだけど、みた感じjsとかモリモリ書かれててわけわからなすぎる…。自分でも導入できるかな? Gulpはsassを使えるようになるのはもちろん、画像やCSS、JS…
目次
記述方法
ベースとしてSassファイルに記述するものは以下のコードです。
$baseFontSize: 16;
@function rem($pixels) {
@return $pixels / $baseFontSize * 1rem;
}
そしてremを使用する際は以下のようにfont-sizeを記述します。
p {
font-size: rem(16);
}
このように記述するとCSSファイルでは1remと出力され、ブラウザでは16pxとなります。
rem(20)と書けば、CSSでは1.25remと出力され、ブラウザでは20px。
rem(40)なら、2.5rem、ブラウザでは40px。
つまり「rem( n )のnの数字がそのままpx値になる」ということです。
以上です。楽ちんですよね。
また、フォントサイズの「vw」単位もこの記述の仕方を利用して関数式で書くことができます。
個人的にはこちらも便利だなと思いますので是非。
Sassを使ってfont-sizeのvw単位をわかりやすくする方法
ここではSassを用いて、計算が複雑なvw単位をわかりやすくする方法を紹介します。 font-sizeに「vw」を指定するシーンというのはそんなに多くないのかなとも思います…
コメント