ママコーダーの備忘録！ Scss基本テクニック#3　便利な関数

Sass(Scss)にはあらかじめ関数が用意されています。面倒な定義をすることなく、すぐに使うことができるので便利です。その中でも私がよく使う便利な関数を3つご紹介します。覚えていて損はありませんよ！

関数その1：rgba

cssで透明度を指定する場合、rgbで色を指定する必要があります。下の例のように、色を16進数で指定するとエラーになってしまいます。

//色はrgbで指定する必要がある
background-color: rgba(165, 4, 18, 0.7);
//色を16進数で指定するとエラーになってしまう
background-color: rgba(#a50412, 0.5);
                        

しかし、Scssのrgba関数を使えば色を16進数で指定しても、コンパイル後にrgba形式に変換してくれます。また、色は変数で管理している場合も多いですが、変数をrgba関数に指定してもrgba形式に変換してくれるので、とても便利です。

$brand-color: #a50412;
background-color: rgba($brand-color, 0.7);
                        

↓コンパイル後

background-color: rgba(165, 4, 18, 0.7);
                        

関数その2：lighten、darken

基本の色から指定した割合で色を明るくできる関数がlighten、暗くできるのがdarkenです。いちいちカラーコードを調べることなく、明るい色と暗い色を設定できるので便利です。

$brand-color: #a50412;
background-color: lighten($brand-color, 30%);
background-color: darken($brand-color, 30%);
                        

↓コンパイル後

background-color: #fb4757;
background-color: #100002;
                        

その3：round、ceil、floor

round、ceil、floorは小数点以下を操作する関数です。roundは四捨五入、ceilは切り上げ、floorは切り捨てをします。

width:round(33.333%);
width:ceil(33.333%);
width:floor(33.333%);
                        

↓コンパイル後

width:33%;
width:34%;
width:33%;
                        

おわりに

いかがでしたか？こんな便利な関数が初めから用意されているなら、使わない手はありませんよね！ 便利な関数を使いこなして明日からのコーディングに活かしていきましょう！