SCSSの基本構文2 - 変数と色の関数の使い方

Webサイト制作

SCSS

基礎

投稿日時 : 2024/11/26 更新日時 : -

プログラミングライクな話になるが変数とは予め指定した値を色んなパーツが参照する事により、もし参照する値に変更が出てきた場合、変数の値を変えるだけでそれを参照する全てのパーツにも適用される概念がある。

SCSSの変数のサンプル

いきなりだがSCSSの変数の使い方は「$」を使う。ここでは$colorという変数を定義して値はredとしている。


$color1: red;

.style1 {
  color: $color1;
}

出力されるCSSは下記になる。


.style1 {
  color: red;
}

お分かりの通り変数を定義しても出力されるCSSには変数本体は出力されず値だけが残るようだ。

SCSSでいろんな変数を定義してみた


$width1: 50%;
$padding1: 20px;
$boder1: 1px solid silver;
$bg_color1: linear-gradient(90deg, rgba(0, 134, 255, 1), rgba(0, 243, 255, 1));

.style1 {
  width: $width1;
  border: $boder1;
  padding: $padding1;
  background: $bg_color1;
}

出力されるCSSは下記だ。


.style1 {
  width: 50%;
  border: 1px solid silver;
  padding: 20px;
  background: linear-gradient(90deg, rgb(0, 134, 255), rgb(0, 243, 255));
}

CSSにカスタムプロパティ(:root)があるので、SCSSの変数よりそちらを使うのがよいとも思う

SCSSで色の関数を使う

SCSSではさまざまな色の関数が使えるのでまとめてみた。

関数	説明
lighten	指定した色を明るくする
darken	指定した色を暗くする
saturate	指定した色の彩度を上げる
desaturate	指定した色の彩度を下げる
adjust-hue	色相（hue）を指定した角度だけ変更する。degを使用
mix	2つの色を混ぜ合わせる
invert	色を反転させる
grayscale	色をグレースケールにする
complement	補色にする


$bg_color1: #336699;
$bg_color2: #996633;

.box {
  width: 9%;
  height: 100px;
  margin-right: 2px;
  float: left;
}

.style1 { background: lighten($bg_color1, 20%); }
.style2 { background: darken($bg_color1, 20%); }
.style3 { background: saturate($bg_color1, 20%); }
.style4 { background: desaturate($bg_color1, 20%); }
.style5 { background: adjust-hue($bg_color1, 45deg); }
.style6 { background: mix($bg_color1, $bg_color2, 20%); }
.style7 { background: invert($bg_color1); }
.style8 { background: grayscale($bg_color1); }
.style9 { background: complement($bg_color1); }

origin

style1

style2

style3

style4

style5

style6

style7

style8

style9