Question

From what I have read and tried, creating color constants in CSS alone is not possible.

Apparently it needs to be generated server side using the constants.

I have two sets of colors that I want to use, depending on the branding. Yet I dont want to differnt style sheets, incase anything changes (which it does since Im still developing).

So Basically, I want a way to be able to define a color constant, with mybe an If statement around it?

So for example:

if (Setting1)
{ 
    color1 = #123534
    color2 = #223534
} 
else
{
    color1 = #553231
    color1 = #653231
}

And in the style sheet, i can call it easily.

background-color = color1

EDIT: Following one of the answers and using, http://www.dotlesscss.org/

I now have a style sheet linked as follows:

<link type="text/css" href="@Url.Content("~/Content/Site.less")" rel="stylesheet" />

Ive imported the dotless.core library. and added all the Webconfig references. Except <dotless
minifyCss="false"
cache="true" /> .(optional and unsure where it goes) What have I done wrong

Answer 1

I would look at using something like dot.less

This works great and installs as a nuget package easily:

http://www.dotlesscss.org/

You also get so much more than just constants

What I do is create base files with constants in which then import the main file which refers to the defined constants. Then in the MVC view choose the base file depending on a setting.

@Color1: #fff;
@Color2: #000;

/* import main css */
@import "main.less";