知っておくと便利!!SASSで用意されている8つの演算関数をまとめてみた

投稿日:

はじめに

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

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.