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」で考える必要がありますが、このように式を作ってしまえば考える必要も無くなります。