SCSS でカラーを変数化すると、再利用性が高くなりとても便利です。
今回は、SCSS で変数化されたカラーを利用して、明るさや彩度を変更する方法を説明したいと思います。
目次
- 定義したカラーの明るさを調整する
- まとめ
定義したカラーの明るさを調整する
赤色の変数 $red-color を 16進数 #CC0000 として定義し、a タグのデフォルトカラーに設定し、hover や visited でバリエーションを表現した例となります。
カラー変数
[code]
$red-color: #CC0000;
[/code]
明るく
hover 時に $red-color を 10% 明るく
[code]
a {
background-color: $red-color;
}
a:hover {
background-color: lighten($red-color, 10%);
}
[/code]
暗く
visited に $red-color を 10% 暗く
[code]
a {
background-color: $red-color;
}
a:visited {
background-color: darken($red-color, 10%);
}
[/code]
彩度を上げる
hover 時に $red-color の彩度を 20% 上げる
[code]
a {
background-color: $red-color;
}
a:hover {
background-color: saturate($red-color, 20%);
}
[/code]
彩度を下げる
visited に $red-color の彩度を 20% 下げる
[code]
a {
background-color: $red-color;
}
a:visited {
background-color: desaturate($red-color, 20%);
}
[/code]
まとめ
ボタンカラーを変数で指定した場合、hover 時のカラーは、別途定義し変数化するパターンもありますが、今回説明した方法を使えば、1つの変数で明るさを調整できるので、是非活用してください。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
