Sass：@functionで関数を作る

Sassには多数の標準関数がありますが、不足があれば自分で作れます。

基本形は下記の記法。

@function 関数名($引数) {
  @return 処理;
}

例えば下記の例。

@function boxWidth($wid, $pad) {
  $wid: $wid - $pad * 2;
  @return $wid;
}
.box {
  width: boxWidth(300, 10);
  padding:0 10px;
}

出力されるCSSは下記。

.box {
  width: 280px;
  padding: 0 10px;
}

「box-sizing」が効かないブラウザでは、レイアウト幅は「width + padding」で考える必要がありますが、このように式を作ってしまえば考える必要も無くなります。