How to make a color scheme for sub sites

I have a question on how to set up a clever way of making a theme of some sort. I'm working with Bootstrap 3.3.7 and less. The challenge is this:

I have a company website with three departments. Each department has its own color. This color is used in the logo and on the links, and maybe on other elements.

The company has some base styling, but when the visitor navigates to one of the department web pages, the color of the logo and links should change to its department colors.

Say, the rules are like this:

base color = black
dept_one = red
dept_two = green
dept_three = orange

How can this be set up using less and variables?

Technically, when loading one of the sub department's pages, a "department class" is added to the <body> tag, so I'm looking for a neat way to structure my less in order to only change the colors one place.

So if I have this html:

<body class="dept_one">

then I would like to be able to do:

a {
  color: @link-color;
}

which will produce

a {
  color: red; 
}

and

<body class="dept_two">

still using

a {
  color: @link-color;
}

which in this case will produce

a {
  color: green; 
}

and so on...

The solution we have today is that a specific department stylesheet is loaded which overwrites the base styling, but I would like to move away from that approach. I was hoping that with less there would be a clever way to do this like a mixin that will generate these color variables?

Solution

Here is a simple example, Sample Pen you can create your own styles like this

HTML

<div class="dep-one">
 <a href="#"> Click here </a>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
<div class="dep-two">
  <a href="#"> Click here </a>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
<div class="dep-three">
  <a href="#"> Click here </a>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>

LESS

@dep-one: red;
@dep-two: green;
@dep-three: orange;

.dep-one {
  color: @dep-one;
  a {
    color: @dep-one;
  }
}
.dep-two {
  color: @dep-two;
  a {
    color: @dep-two;
  }
}
.dep-three {
  color: @dep-three;
  a {
    color: @dep-three;
  }
}
div {
  padding: 10px;
  text-align: center;
}