Sassのfunctionと使い方について

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Sassのfunction（自作関数）と使い方について

mixinと比べ、使用頻度は減るかと思いますが、コーディングの幅が広がると思いますので
使い方について簡単ではありますが記事にしました。

例

関数の定義

Sassで自作関数を定義する方法は、以下のように記述します。
引数を囲む( )は、引数があってもなくても必要です。

@function 関数名(引数) {
  @return 
}

関数colorRedを定義し、それを.testのcolorプロパティに呼び出してみます。

style.scss

@function colorRed() {
  @return #00f
}

.test {
  color: colorRed();
}

CSSにコンパイルすると以下のようになります。
@returnされると、00fがcolorプロパティの値としてそのまま代入します。

style.css

.test {
  color: #00f;
}

引数

( )に$引数名を定義すると、関数の中で使える変数として扱うことができます。
.testのcolorプロパティに関数colorCodeの引数をgreenと記述してみます。

style.scss

@function colorCode($value) {
  @return $value
}

.test {
  color: colorCode(green);
}

CSSにコンパイルすると以下のようになります。
引数に指定したプロパティがそのまま反映されます。

style.css

.test {
  color: green;
}

小数を変換する

次に、小数を%に変換する関数を作成してみます。
widthプロパティへの引数に.5=50%を指定して、@returnに返す引数の結果に100%を掛けます。

style.scss

@function widthSpace($value) {
  @return $value * 100%
}

.test {
  width: marginSpace(.5);
}

そうすると、widthプロパティの値は50%となります。

style.css

.test {
  width: 50%;
}

引数を関数内で計算する

$valueの値を関数の中で計算してから使うこともできます。

style.scss

@function marginSpace($value) {
  $value: $value * 3;
  @return $value * 100%
}

.test {
  margin: marginSpace(.12);
}

style.css

.test {
  margin: 36%;
}

四捨五入する

引数に0.255のような値を指定して、実行結果に小数点以下を切り捨てる場合はSassの組み込み関数を使います。

round

Sassの組み込み関数で、round()と記述し、( )に処理したい値を渡すと、四捨五入した値を返します。

style.scss

@function marginSpace($value) {
  $value: $value * 3;
  @return round($value * 100%)
}

.test {
  margin: marginSpace(.125);
}

style.css

.test {
  margin: 38%;
}