Less mixins, variable colours specificity

Question

I have a design where I need to be able to change colours on a page depending on the input in the cms.

To do this I'm adding one class to a containing div and I'll change the colours according to that surrounding class.

There's going to be a set amount of colours. (8, I think. It's not been decided yet.)

My idea was to use a mixin to accomplish this. eg.

Example HTML

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

Example LESS Mixin

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

Example LESS

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

Problem

The problem is that the specificity for the mobile version is higher than the desktop one.

Example rendered 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;
    }
}

This issue will effect the rest of the page. Is there a better way to accomplish what I'm looking for without sticking important tags everywhere?

________________Edit________________

For clarity, the site I'm building will allow logged in users of a certain tier to change the main colour of their personal page, I still need the client to decide on how many colours but I think it will be around 8. Instead of writing out each of those, or having a separate stylesheet for each one (Maintaining that would be horrible) I decided to create a Mixin for it. There will be mutiple background colours and text colours that need to change, and due to the design they will need the change to different colours at mobile desktop and tablet.

Answer 1

Thinking of the nature of CSS something must be amiss with your code as the browser will always take the last value you give to a certain selector.

For example the following h1 would be red:

<h1 class="foo">Headline</h1>

.foo { color: blue; }
.foo { color: red; }

And it will change it's color when you give it a different value inside a mediaquery if the mediaquery is matched. So in the example below the h1 will be green when the viewport exceeds 399px in width:

<h1 class="foo">Headline</h1>

.foo { color: blue; }
.foo { color: red; }
@media all and (min-width: 400px) {
  .foo { color: green; }
}

What's confusing me is the difference between your LESS code and what's in the outpout CSS. I'd suggest you have a second look at your selectors and/or variables. Indentation can be quite confusing as well, so may be you should opt for a mobile-first LESS file and then create others for mediaqueries (and import those in a main less file keeping the order intact).