More than 3 years have passed since last update.

Sassで出来ること【vol.3】関数

Last updated at 2020-05-26Posted at 2020-01-19

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に変換されました。