私が愛してやまないSassの関数5選

Sassの関数には数値や文字列を操作するものもありますが、私が愛してやまないのは専ら色を操作する関数たちです。
どのような関数か、といった解説は今更感が半端ではないため割愛させていただきます。

rgba

CSSでは16進数での色指定ができませんが、Sassではできます。地味に便利です。
また変数での指定もできるため、単に透明度を上げたい時にもよく使います。

Sass

.button {
  background-color: blue;

  &.disabled {
    background-color: rgba(blue, 0.25);
}

CSS

.button {
  background-color: blue;
}

.button.disabled {
  background-color: rgba(0, 0, 255, 0.25);
}

メインカラーの明度だけ調整したサブカラーを作りたい、といった時に使います。

Sass

.button {
  background-color: blue;

  &:hover {
    background-color: lighten(blue, 20%);
  }

CSS

.button { background-color: blue; } .button:hover { background-color: #6666ff; }

こちらは明度ではなく彩度を変更する関数です。
同系色のバリエーションは明度を変える方が作りやすいですが、こちらも時々使用します。

Sass


.button {
  background-color: blue;

  &.secondary {
    background-color: desaturate(blue, 90%);
  }

CSS

.button {
  background-color: blue;
}

.button.secondary {
  background-color: #73738c;
}

上記を含めたあらゆる色の値を操作できます。
全てこの関数に統一してしまうのも良いかもしれません。

Sass

.button {
  border: 1px solid blue;
  background-color: scale-color(blue, $lightness: 80%, $saturation: -50%);
}

CSS

.button {
  border: 1px solid blue;
  background-color: d9d9f2;
}

指定した色の補色を返します。補色のアクセントカラーを入れたい時に便利です。

Sass

.button {
  background-color: blue;
  color: complement(blue);
}

CSS

.button {
  background-color: blue;
  color: yellow;
}

私がSass（CSSプリプロセッサ）を初めて導入した時に最も感動したのは、長期にわたって運用されるWebサイトにおいても、デザインの一貫性が保ちやすくなったことです。

jpgの画像からカラーピッカーで拾ってきたような、非常に近いけれどよく見ると違う、意図的なのか何なのかよく分からない、星の数ほどあるカラーバリエーション。

そういう残念な状況を見なくなったことの喜びを噛み締めていたら、無性にガリガリ君が食べたくなった為これで終わりにします。

ご愛読ありがとうございました。俺たちの戦いはこれからだ！