はじめに
SASSでは、知っておくと便利な関数がたくさん用意されています。
今回は、計算用の関数にフォーカスして、ご紹介していきます。
- percentage:数値に「%」を付ける
- round:数値を四捨五入する
- ceil:小数点を切り上げる
- floor:小数点を切り捨てる
- abs:数値の絶対値を返す
- min:数値の最小値を返す
- max:数値の最大値を返す
- random:ランダムな値を返す
※本サイトではSASS記法で記述していますが、SCSS記法でも使えます!
percentage() の使い方
// SASSの記述
.hoge
width: percentage(10)
出力結果
/* CSSの出力結果 */
.hoge {
width: 10%;
}
percentageを使うと引数で渡した数値に「%」を付けて返します。
round() の使い方
// SASSの記述
.hoge
width: round(1.2)
height: round(1.8px)
出力結果
/* CSSの出力結果 */
.hoge {
width: 1;
height: 2px;
}
roundを使うと引数で渡した数値を四捨五入して返します。
また、「1.8px」というように単位を渡すと単位ごと返ってきます!
ceil() の使い方
// SASSの記述
.hoge
width: ceil(1.2)
height: ceil(1.8px)
出力結果
/* CSSの出力結果 */
.hoge {
width: 2;
height: 2px;
}
ceilを使うと引数で渡した数値の小数点を切り上げた値を返します。
また、こちらも「1.8px」というように単位を渡すと単位ごと返ってきます!
floor() の使い方
// SASSの記述
.hoge
width: floor(1.2)
height: floor(1.8px)
出力結果
/* CSSの出力結果 */
.hoge {
width: 1;
height: 1px;
}
floorを使うと引数で渡した数値の小数点を切り捨てた値を返します。
また、こちらも「1.8px」というように単位を渡すと単位ごと返ってきます!
abs() の使い方
// SASSの記述
.hoge
width: abs(20)
height: abs(-10px)
出力結果
/* CSSの出力結果 */
.hoge {
width: 20;
height: 10px;
}
floorを使うと引数で渡した数値の絶対値(正の値)を返します。
また、こちらも「10px」というように単位を渡すと単位ごと返ってきます!
min() の使い方
// SASSの記述
.hoge
width: min(10px, 20px, 30px)
出力結果
/* CSSの出力結果 */
.hoge {
width: 10px;
}
min関数を使うと、引数で渡した値の中から最も小さい値を返します。
max() の使い方
// SASSの記述
.hoge
width: max(10px, 20px, 30px)
出力結果
/* CSSの出力結果 */
.hoge {
width: 30px;
}
max関数を使うと、引数で渡した値の中から最も大きい値を返します。
random() の使い方
// SASSの記述
.hoge
width: random() + px
heihgt: random(10) + px
出力結果
/* CSSの出力結果 */
.hoge {
width: 0.28195px;
height: 7px;
}
random関数を使うと、乱数を返すことが出来ます。
また、引数に数値を渡せば「1~数値」までの乱数を求めることが出来ます。
今回は、「10」を渡しているので「1~10」の乱数ですね!
random関数を使う際に注意したいのが、乱数を返すのはSASSのコンパイル時のみになります。
ウェブページをロードした際に乱数を出すときは別途、JavaScriptなどを使う必要があります。