現場で役立つ実践Sass（5）関数も使おう
現場で役立つ実践Sass
第5回目は、Sassの関数（functions）について紹介します。
プログラミング言語では必ず出てくる関数。Sassでは主にCSSの値を処理する際、例えば、あるプロパティで指定した色を「30%明るい色の値にする」といった目的で使用します。
公式サイトの基本機能の紹介「Sass Basics」でも紹介されているMixinやExtendなどの類似した機能が注目されがちですが、関数こそすぐに導入できる機能と言えます。
なぜなら、おおよそ80種類もの便利な関数が用意されており、定義しなくてもそのまま使えるからです。
もちろん、自作関数を定義することもできます。関数の特徴を理解したら積極的に使っていきましょう。
DreamweaverがSassに正式対応
先月公開された、Dreamweaver CCの2016年11月リリースでは、大幅な機能の刷新・追加が行われ、待望のCSSプリプロセッサー（Sass, LESS）もサポートされました。
SASS/SCSSファイルの編集はもちろん、ファイル保存のタイミングで自動的にCSSにコンパイルされます。RubyやNode.jsのイントールや環境構築は不要で、Dreamweaverを更新すれば、そのまま使えるのは嬉しい点です。
サイト設定に「CSS プリプロセッサー」の項目があり、出力設定やフレームワーク設定が行える
書き出すファイルの形式など関連する環境設定はGUIから行えます。Dreamweaverユーザーの方は、最新版へアップデートして、Sassをプロジェクトに導入されることをお勧めします。
Sass関数の基本的な使い方
では、さっそくSassに予め用意されている関数を使ってみましょう。
（用意されている関数のことを、ここでは「ネイティブ関数」と呼びます。）
下の例では、ネイティブ関数であるlighten関数を使い色の値を指定しています。
//コンパイル前（SCSS）
.item-box {
color: lighten(#000000, 30%);
}
//コンパイル後（CSS）
.item-box {
color: #4d4d4d;
}
lighten関数により、黒色が30%明るくなった色#4d4d4dが出力されました。
このように関数を呼び出す時は、「関数名（引数）」を、値の場所にそのまま書きます。@mixinや@extendのように@（ディレクティブ）を書く必要はありません。
CSSのcalcの様なものが沢山用意されていると考えてください。
自作関数
ネイティブ関数は便利ですぐに利用できると強調しましたが、自作関数を作成することもできます。
呼び出す時の@（ディレクティブ）は不要でしたが、作成する際は@functionで定義し@returnで返す値を示します。
@function 自作関数名($引数){
@return 戻り値;
}
では、例として、サイト横幅に対するカラム幅の割合（パーセント）を計算する関数を作成してみましょう。
//コンパイル前（SCSS）
$container: 1000px;
@function calc-percent($target) {
@return ($target / $container) * 100%;
}
.item-box {
width: calc-percent(650px);
}
//コンパイル後（CSS）
.item-box {
width: 65%;
}
サイト横幅（1000px）に対して、.item-boxの幅が65%と計算されました。
繰り返し同じ処理が必要な場合は、このように関数としてまとめることで、何回も割合を計算しては単位をパーセントにするコードを記述しなくてもよくなります。
再利用可能なコードをまとめるという点はMixinと似ていますね。
次は、Mixinと関数の違いについて説明します。
Mixinとの違い
Mixinは、ルールセットやネストされたセレクタなどもセットで書き出すことができます。一方、関数は基本的に値のみを返します。（一部セレクタに使う関数があります）
具体的な例を使って比較してみましょう。与えられた行間のピクセル数から、フォントサイズに対する行間の相対値を計算するMixinと関数を作成し、比べてみました。
まずはMixinのサンプルコードです。
//SCSS （コンパイル前）
$fz: 14;
@mixin font-height($font-size, $line-height) {
font-size: #{$font-size}px;
line-height: ($line-height / $font-size);
}
.block {
@include font-height($fz, 20);
}
//CSS （コンパイル後）
.block {
font-size: 14px;
line-height: 1.42857;
}
このように、Mixinではプロパティと計算された値がセットで書き出されます。
関数の場合は、書き出されるのが値だけになるので、プロパティを記述し、値の代わりに記述します。これは、ネイティブ関数の説明でも書いた通りです。
//SCSS （コンパイル前）
$fz: 14;
@function font-height($line-height) {
@return ($line-height / $fz);
}
.block {
font-size: $fz + px;
line-height: font-height(20);
}
//CSS （コンパイル後）
.block {
font-size: 14px;
line-height: 1.42857;
}
line-heightの値の位置に関数を記述しました。
何をしているのか分かりやすいので、可読性が上がりますね。
どちらを使うかはケースバイケースですが、可読性や拡張性などを考え検討してください。
また、Mixinに関数を組み合わせて使えば、より便利に活用することができます。
よく使うネイティブ関数
ここからは、私がよく使うネイティブ関数18個をざっと紹介します。
きっと現場で役に立ちますので、これらを覚えておいて損はないでしょう。
繰り返しますがネイティブ関数は予め用意されているので、定義する必要はなく、そのまま使うことができます。
※コード内に、コンパイル後の結果を一行コメント(//)として記述してあります。
色の関数
ネイティブ関数の中でも一番種類の多いのが、この色の関数です。
デザインデータでレイヤーに不透明度が指定されている場合や、ここを10%暗く or 明るくしたいなど、後から修正が入った場合の対応などにも便利です。****
rgba($color, $alpha)
色($color)と不透明度色($alpha)を指定して RGBa に返します。
.sample {
color: rgba(#e00, 0.5);
//color: rgba(238, 0, 204, 0.5);
}
色の指定はHEXだけではなく、rgbやhsl、カラーネームも使えます
mix($color1, $color2, [$weight])
2つの色と割合($weight)を指定し、その間の色を返します。
.sample {
color: mix(#fc0, #0cf, 50%);
//color: #80cc80;
}
%は省略もできます。
lighten($color, $amount)
明度を％で指定した引数の分だけ上げます。**
**
.sample {
color: lighten(#000000, 30%);
//color: #4d4d4d;
}
darken($color, $amount)
lighten関数とは逆に、明度を％で指定して下げます。
.sample {
color: darken(#ffffff, 30%);
//color: #b3b3b3;
}
saturate($color, $amount)
彩度を％で指定して上げます。
.sample {
color: saturate(#855, 20%);
//color: #9e3f3f;
}
desaturate($color, $amount)
saturate関数とは逆に、彩度を％で指定して下げます。
.sample {
color: desaturate(#855, 20%);
//color: #726b6b;
}
complement($color)
補色（色相環で正反対に位置する色）を返します。
.sample {
color: complement(#00f);
//color: yellow;
}
色の関数は他にも、グレースケールにするgrayscale関数、色相環の角度を変えるadjust-hue関数、反転させるinvert関数などがあります。
色を変化させる関数については、CSS Color Module Level 4にて、ブラウザ実装の仕様策定が進められています。
まだ使うことはできませんが、近い将来CSSのみで使えることになりそうです。（Sassの関数と書き方は違います）
CSS Color Module Level 4 – Modifying Colors: the color-mod() function
文字や数字の関数
文字や数字に使う関数は、変数やMixinと組み合わせて使うことが多いです。
quote($string)
文字をクォーテーション" "で囲います。
.sample::after {
content: quote(ほげほげ);
//content: "ほげほげ";
}
unquote($string)
quote関数とは逆に、クォーテーションを取り除く場合は unquote関数を使います。
.sample::after {
content: unquote("ほげほげ");
//content: ほげほげ;
}
percentage($number)
値のパーセントを計算します。
.sample {
width: percentage(0.5);
height: percentage(100px / 50px);
//width: 50%;
//height: 200%;
}
round($number)
小数点を四捨五入します。
.sample {
width: round(100.4px);
height: round(100.5px);
//width: 100px;
//height: 101px;
}
ceil($number), floor($number)
ceil関数で小数点切り上げ、floor関数で小数点切り捨てをします。
.sample {
width: ceil(100.1px);
height: floor(100.1px);
//width: 101px;
//height: 100px;
}
abs($number)
絶対値を返します。
.sample {
width: abs(100px);
height: abs(-100px);
//width: 100px;
//height: 100px;
}
文字や数字の関数は他にも、文字数を数えるstr-length関数、最大値を返すmax関数、最小値を返すmin関数、ランダムな数値を返すrandom関数などがあります。
配列の関数
配列やマップに使う関数は、@ifや@eachなど制御構文と組み合わせて使うことが多いです。
※contentプロパティは、正しくは文字列をクォーテーションで囲う必要がありますが、下の例では省略しています。
length($list)
配列内の要素数を返します。
$list: pen, apple, pineapple;
.sample {
z-index: length($list);
//z-index: 3;
}
nth($list, $n)
配列の中からn番目の値を返します。
$list: pen, apple, pineapple;
.sample::after {
content: nth($list, 2);
//content: apple;
}
join($list1, $list2, [$separator])
配列を連結します。
$list1: pen, pineapple;
$list2: apple, pen;
.sample::after {
content: join($list1, $list2);
//content: pen, pineapple, apple, pen;
}
第3引数 $separator にcommmaかspaceを指定することでリストを区切る文字を指定できます。
append($list1, $val, [$separator])
配列の最後に、第2引数で指定した値を追加します。
$list: pen, pineapple, apple;
.sample::after {
content: append($list, pen);
//content: pen, pineapple, apple, pen;
}
map-get($map, $key)
マップから $key の値（value）を取得します。
$map: (
pen: black,
pineapple: yellow,
apple: red
);
.sample {
color: map-get($map, apple);
//color: red;
}
特によく使う関数を紹介しましたが、機能の有無を確認する関数など、便利な関数は他にもあります。興味があれば公式ドキュメントの関数リストをご確認ください。
セレクタの関数については、selector-replace関数を第2回「セレクタを置換する」の章でも解説しています。
関数はひとまず覚えてしまえば使うことができます。
まずはネイティブ関数でどのようなことができるか、ざっくり把握しておくところから始めてみてはどうでしょうか。
各プロパティで繰り返し使う場合、値だけ処理する場合は関数が役に立ちます。Mixinとうまく使い分けて活用しましょう。