Demo : https://codepen.io/mo4_9/pen/oeQyKN
色情報をまとめる
$colors: (
1: (
main1: #ff0000,
main2: #F96565,
sub1: #FFBC00,
sub2: #FFD564,
),
2: (
main1: #39FF00,
main2: #82FF5F,
sub1: #00F1FF,
sub2: #64F6FF,
),
3: (
main1: #1500FF,
main2: #6355FF,
sub1: #FF00AC,
sub2: #FF5DCA,
),
);
data-week
の値を変更すると全体の色が変わる
@each $key, $color in $colors {
.wrapper[data-week="#{$key}"]{
$main1-color: map-get(map-get($colors,$key),main1);
$main2-color: map-get(map-get($colors,$key),main2);
$sub1-color: map-get(map-get($colors,$key),sub1);
$sub2-color: map-get(map-get($colors,$key),sub2);
// color
.wc_c_m1{ color: $main1-color; }
.wc_c_m2{ color: $main2-color; }
.wc_c_s1{ color: $sub1-color; }
.wc_c_s2{ color: $sub2-color; }
// background-color
.wc_b_m1{ background-color: $main1-color; }
.wc_b_m2{ background-color: $main2-color; }
.wc_b_s1{ background-color: $sub1-color; }
.wc_b_s2{ background-color: $sub2-color; }
// linear-gradient
.wc_lg_m1{ background-image: linear-gradient($main1-color, $main2-color); }
.wc_lg_m2{ background-image: linear-gradient($main2-color, $main1-color); }
.wc_lg_s1{ background-image: linear-gradient($sub1-color, $sub2-color); }
.wc_lg_s2{ background-image: linear-gradient($sub2-color, $sub1-color); }
}
}