はじめに

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などを使う必要があります。