Passing a parameter to a CSS class from web page

Question

Problem statement is, I have 2-3 web pages; and I want to have different body colors on this pages but keeping the class name unique to "myBody".

I looked for many blogs and authors but did not find any suitable answer to achieve this from a traditional CSS approaches.

Please suggest if it is possible to have a single CSS class accepting a parameter from a web page which will decide what body color should be applied using the same CSS with different parameters"

    .myBody(@color)
     {
     background-color: @color;
     font-size: 11px;
     color: Black;
     border: 1px solid;

     }

The answer may be tricky for some folks but I really want to see if I can achieve this using CSS only.

Answer 1

You should split them up into different classes like this.

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
 }
 .background_red
 {
     background: red;
 }
 .background_green
 {
     background: green;
 }

Then use them like this

<div class="mybody background_red"></div>

<div class="mybody background_green"></div>

You also have the ability to overwrite css like this:

.myBody
{
    background:red;
}
.overwrite_background
{
    background:green;
}

<div class="myBody"></div>
<div class="myBody overwrite_background"></div>

The first div would have a background of red where the second one would have a background of green.

Here is another post you should look at. This reference a couple of options you have to handle this situation. How to pass parameters to css classes

Another option is to use Sass. Sass allows you to use a programming language to create your css. This is wonderful for changing things over a mass on the fly. If you use the same color in multiple places, or if you want to have a different configuration for each site and still carry the same css just different colors.