CSS
scss

mapを使った色の管理

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); }
    }
}

参考
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説