css - ミックスインが少なく、色の特異性が変化する

Question

cms の入力に応じてページの色を変更できるようにする必要があるデザインがあります。

これを行うには、1 つのクラスを含む div に追加し、その周囲のクラスに従って色を変更します。

決まった色数になります。（8、だと思います。まだ決まっていません。）

私の考えは、これを達成するために mixin を使用することでした。例えば。

HTML の例

<div class="color-1>
    <h1 class="h1">My Title</h1>
</div>

LESS ミックスインの例

.color() {
    @color_1: red;
    .color-1 & {
        color: @color_1;
    }
    @color_2: blue;
    .color-2 & {
        color: @color_2;
    }
    //etc.....
    //I have a similar mixin for background-color -> .bg-color();
}

例 LESS

.h1 {
    .color();
    background-color: #fff;
    @media screen and (min-width: 960px) {
        color: #fff;
        .bg-color();
    }
}

問題

問題は、モバイル版の特異性がデスクトップ版よりも高いことです。

レンダリングされた CSS の例

//Could be color-2, color-3 etc. depending on class, doesn't matter for this example
.color-1 .h1 { //This would override the media query below due to 2 classes
    color:red;
}
.h1 {
    @media screen and (min-width: 960px) {
        color: #fff;
        background:color: red;
    }
}

この問題は、ページの残りの部分に影響します。重要なタグをあちこちに貼り付けずに、探しているものを達成するためのより良い方法はありますか?

________________編集________________

明確にするために、私が構築しているサイトでは、特定の層のログイン ユーザーが自分の個人ページのメインの色を変更できるようにします。色の数はクライアントに決定してもらう必要がありますが、約 8 になると思います。代わりにそれらのそれぞれを書き出すか、それぞれに個別のスタイルシートを用意します (それを維持するのは恐ろしいことです)。私はそのための Mixin を作成することにしました。複数の背景色とテキスト色を変更する必要があり、設計上、モバイル デスクトップとタブレットでは別の色に変更する必要があります。