変数、関数【SASS、SCSS】

※自分用の備忘録です。

SASS、SCSSはプログラミング的な機能があり、変数を設定したり、関数を使用したりすることができます。

変数

SCSS例

$mainColor: #1234ab;
$subColor: red;
$fontSize: 3rem;
$headerHeight: 80px;
$borderStyle: 3px solid #333;

h1 {
  color: $subColor;
  background-color: $mainColor;
  font-size: $fontSize - 1rem;
  height: $headerHeight + 20px;
  border-bottom: $borderStyle;
}

$変数名: 値;

変数の書き方

ウェブページでは、見た目に統一感を出すためにメインカラーやサブカラーを決めておくことがよくあります。

メインカラーやサブカラーを変数にしておくと、使い回しがしやすくとても便利です。

また、メインカラーを変えたいときなどに、メインカラーの変数を変えれば設定している全てのスタイルの変更が一括で行えるので、メンテナンス面でもとても優れています。

変数はスタイルとして使用する場所より前に定義する必要があります。

変数は使用する際に「-」や「+」を使うことで値の調整ができます。

関数（一例）

lighten、darken、transparentize、adjust-hue

h1 {
  background-color: lighten($mainColor, 20%);
}

h2 {
  background-color: darken($mainColor, 20%);
}

h3 {
  background-color: transparentize($mainColor, .5);
}

h4 {
  background-color: adjust-hue($mainColor, 90);
}

• lighten 明るさ

• darken 暗さ

• transparentize 透明度

• adjust-hue 値の分だけ反転させた色

グラデーションやシャドウを使用するときなどに組み合わせて使うことができます。

 div {
  background-image: linear-gradient($mainColor, adjust-hue($mainColor, 90));
  box-shadow: 5px 5px 5px lighten($mainColor, 50%);
}