【SASS/SCSS】組み込み関数で色を変更する

SASS/SCSS
変数ｘ
変数ｘ

Sassの組み込み関数を使えるようになると楽だぞ、

動点P
動点P

え、いや、誰？

動点Qちゃん
動点Qちゃん

いろんな数を代入できる変数ｘです・・・彼は組み込み関数を教えてくれるようです・・・

動点P
動点P

それは嬉しいけど、新キャラとか出るんだ…、なんか僕より主人公っぽいし、複雑な気持ち・・・。

組み込み関数とは

というわけで、CSSをいじっているときでも、「この数よりもうちょっと大きい数値にしたいな」とか、「この色よりもうちょっと明るくしたいな」とか、ある数値を基準にして変更したい数値って結構いっぱいありますよね。

SCSSやSASSには「〇〇と入れたらそれに+◆（ある計算）をして▲▼と返す」という関数を自作して使うことができます。でも関数を自分で作るのって難しそう…。

そういうときは組み込み関数という、もうすでに用意されている関数が多数存在しますので、手軽にその機能を使うことができます。

以下は主にSCSSでの記法を解説しています。SASSでも同様な機能がありますが、記述スタイルが少し異なります。

組み込み関数の使い方

例えば、redという色を基準にして、その色を少し明るくしたい場合、わざわざ色を探して調整するのは面倒です。

background: red; 　　←これよりちょっと明るい色にしたい

そういうとき、

background: lighten(red, 20%);

と入力するだけで、元の red より20％明るい色を指定できます。

この lighten という関数だけではなく、ほかにも様々な機能のある関数が、すでにいっぱい用意してあるわけですね。覚えて使えるようになるとすごく便利そうです。

組み込み関数の例

組み込み関数はいろんな値を変更できますが、今回は主にスタイルの色変更を具体的に解説しています。自分が勉強するモチベがスタイル変更だったので。

実際変更したらどうなるかの参考の正方形の図を載せていますが、これはCSSで書いたものです。

色の輝度・彩度・透明度を変える

lighten / darken　色の輝度を変える

lighten (●●, 〇〇%)・・・ ●●（色）を〇〇%明るくする

darken (●●, 〇〇%)・・・ ●●（色）を〇〇%暗くする

SCSSで指定

.circlebox div:nth-of-type(1) {
    background: darken(red, 20%);
}

.circlebox div:nth-of-type(2) {
    background: red;
}

.circlebox div:nth-of-type(3) {
    background: lighten(red, 20%);
}

CSSで表示される色

.circlebox div:nth-of-type(1) {
  background: #990000;
}

.circlebox div:nth-of-type(2) {
  background: red;
}

.circlebox div:nth-of-type(3) {
  background: #ff6666;
}

saturate / desaturate 　色の彩度を変える

saturate (●●, 〇〇%)・・・ ●●（色）を〇〇%鮮やかにする

desaturate (●●, 〇〇%)・・・ ●●（色）を〇〇%濁らせる

transparentize / rgba 　色の透明度を変える

transparentize (●●, .〇)・・・ ●●（色）を〇割透明にする。

SCSSで指定 

.circlebox div:nth-of-type(1) {
    background: transparentize(red, .6);
    margin: 8px;
}

.circlebox div:nth-of-type(2) {
    background: transparentize(red, .2);
}

.circlebox div:nth-of-type(3) {
    background: red;
}

CSSで表示される色 

.circlebox div:nth-of-type(1) {
  background: rgba(255, 0, 0, 0.4);
  margin: 8px;
}

.circlebox div:nth-of-type(2) {
  background: rgba(255, 0, 0, 0.8);
}

.circlebox div:nth-of-type(3) {
  background: red;
}

rgba (●●, .〇)・・・ ●●（色）を〇割　不透明にする。

上の transparentize と違って数値が大きいほど不透明になります。

色相を変える

adjust-hue　 色の色相を変える

adjust-hue (●●, 〇〇deg)・・・ ●●（色）を〇〇度 色相を変える。

ある色を元に、そこから時計回りに何度色相が回転するか角度を入力することで色相を変更できます。

色相（Hue） は色の種類を決める要素で、色輪（レッド、イエロー、グリーン、ブルー、など）で360度を一周します。 〇〇deg には、角度 を指定します。時計回りに色相を変えるため、例えば45degと指定すれば、元の色が時計回りに45度進んだ色に変わります。

注意点：

  • 角度の値は正の値なら時計回り（色相が進む方向）、負の値なら反時計回り（色相が逆方向）に色を変更します。
  • 360度回転すると元の色に戻りますが、それを超える場合は360度を超えて色が繰り返されます。

SCSSで指定 

.circlebox div:nth-of-type(1) {
    background: red;   
}

.circlebox div:nth-of-type(2) {
    background: adjust-hue(red, 30deg);
}

.circlebox div:nth-of-type(3) {
    background: adjust-hue(red, 60deg);
}

CSSで表示される色 

.circlebox div:nth-of-type(1) {
  background: red;
}

.circlebox div:nth-of-type(2) {
  background: #ff8000;
}

.circlebox div:nth-of-type(3) {
  background: yellow;
}

その他

invert　 色を反転する

invert (●●)・・・ ●●（色）を反転する。

complement　 補色に変更する（彩度や明度は変わりません）

complement (●●)・・・ ●●（色）の補色に変える。

組み込み関数の利用

組み込み関数を使って色を変えると、動的で視覚的に魅力的なUIが作れます。特にボタンやインタラクティブな要素で活用することが多いです。以下にいくつかの例を挙げてみます。

グラデーション

利用方法はいろいろあるかと思いますが、例えばグラデーションで、少しずつ明るくなっていくグラデーション、少しずつ色相が変わっていくグラデーション、などを作るときに利用できます。

このグラデーションは

赤　→　赤の色相環を30度変えた色　→　赤の補色　

という変遷のあるグラデーションです。

SCSSで指定 

.circlebox7 {
    width: 200px;
    height: 200px;
    background: linear-gradient(red, adjust-hue(red, 30deg),complement(red));
    margin: 8px;
}

CSSで表示される色 

.circlebox7 {
  width: 200px;
  height: 200px;
  background: linear-gradient(red, #ff8000, cyan);
  margin: 8px;
}

グラデーションはアニメで色を変更させれば、エモい令和な感じにしやすくていいですよね。

いろんな色に変わるアニメをつけたいときも、普通なら一色一色アニメーションをつけないといけなくて大変ですが、adjust-hueで0度から360度までアニメーションさせれば済みます。

ボタン

hover時に濃くなったり、色を変えたりアニメーションしたい場面は多いと思います。そういうときに便利なのがこの組み込み関数です。

特にページ全体で色味、色調を合わせたいとき、頑張って同じ輝度・彩度・明度のカラーを探して一つ一つ色を指定しなくても、輝度・彩度・明度などを最初から決めておけば、組み込み関数で色相を変えるだけで、全体のトーンを合わせることができます（厳密にトーンを調整しようと思ったら一色ずつ結局調整することになるとは思いますが、パパっと済ませたいときは十分だと思います。）

シャドウ

濃さ調整にもつかえます。これも組み込み関数を使えば全体の影表現を統一することができます

まとめ

SCSS（SASS）の組み込み関数は、Webデザインやスタイル作成を行う際に非常に便利で強力な機能です。これを使うと、色を変えたり、数値を計算したりする作業がとても簡単にできるようになります。例えば、ボタンの色を少し明るくしたり、グラデーションを動的に調整したりするのがとても楽になります。

さらに、動きのあるデザインや、画面の大きさに合わせて見た目が変わるレスポンシブデザインを作るときにも、この組み込み関数が大いに役立ちます。色やデザインが動的に変化することで、サイトに変化をつけたり、ユーザーに合わせたデザインを作ったりするのが容易になります。

このような便利な組み込み関数をうまく活用すると、コードを書くときに手間を減らし、より効率的に作業を進めることができます。結果として、シンプルで読みやすく、管理もしやすいスマートなコードを作成することができるようになります。

組み込み関数にはほかにも数値、文字列、配列などを扱えるものがあります。もっと勉強してみたいという方は調べてみてください。

コメント