Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

関数

scssは関数を使用することが出来ます。
Sassですでに用意されている組み込み関数というものもありますが、
自身で関数を作成することも出来ます。

組み込み関数

組み込み関数はたくさんあるので、例として「lighten」関数を紹介します。
関数の使用方法はとてもシンプルです。

.scss

.hoge {
    color: lighten(#000000, 50%);
    //#000000は黒
}

cssに変換するとこの様になります。

変換後の.css

.hoge {
    color: gray;
}

　lighten(指定色,輝度を上げる%);　で記述をしています。
「#000000」（黒）が「50％」明るくなった色である「gray」に変換されました。

自身で関数を作る記述方法を紹介します。
数値を２倍にする簡単な関数です。

.scss

@function nibai($value) {
    @return $value *2;
}
.hoge {
    width: nibai(100px);
}

「@ function」で関数を定義し「@ return」で戻り値を示しています。
cssに変換するとこの様になります。

変換後の.css

.hoge {
    width: 200px;
}

nibaiに渡した100pxが200pxに変換されました。