【sass】変数、関数の設定について

sassの機能の一つである変数、関数の設定について復習しておきたい。
マークアップをする機会がチーム開発であり、sassが煩雑になっているので必要になっているためです。

設定自体のやり方は簡単です。

#変数
$back-color:whitesmoke;

#関数
@mixin underline{
  display: block;
  border-width: 0;
  border-bottom: 1px solid #F2F2F2;
}

変数は$変数名:値をscssシートの冒頭に記載する。ここではwhitesmokeという値を 変数back-colorという名前をつけて設定する。
関数については@mixin 関数名称をつけて以下に実際の設定値を入力する。
では実際に変数、関数の使い方はどうするのかは以下の通りです。

 #変数使用方法
background-color: $back-color;

#関数使用方法
@include underline()

変数についてはwhitesmokeと入力する箇所に$back-colorとすることで変数をしようできます。

関数については@include 使用する関数名()で実際に使用できます。

関数、変数は別ファイルでも使用できるので、パーシャルで変数専用、関数専用のファイルをつくって、そこから関数、変数を持ってくるようにすれば便利です。