SCSS: カラーを配列化し利用する

SCSS では、ネストされたクラスの記述・メンテナンスのしやすさに加え、ループ処理や変数が利用できるのが最大のメリットです。
今回は SCSS 変数にカラー名で配列化し、利用する方法を説明します。

目次

• カラーを配列化し利用する
• まとめ

カラーを配列化し利用する

SCSS

[code]
$colors: (
red: #fc4741,
orange: #fd9b2e,
yellow: #fed533,
olive: #B5CC18,
green: #3bcf61,
teal: #00B5AD,
blue: #1c87fb,
violet: #5f61e3,
purple: #d483f2,
pink: #fc527b,
brown: #c8a578,
gray: #727e87,
salmon: #eab5af
);

.color-bg {
@each $name, $value in $colors {
&.#{$name} {
background: $value;
}
}
}
[/code]

HTML

[code]

[/code]

まとめ

プロジェクト開始時にカラーパレットの定義からはじめれば、デザイナー、プログラマー共に幸せになるかと思います。

今回紹介した方法以外でも、変数名のレギュレーションによる SCSS のカラー管理もありますが、配列化するメリットは、一括してカラークラスを定義し、再利用できることだと思います。みなさんも是非一度利用してみてください。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。