ASP.NET MVC3: Creating Colour constants in CSS

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

Richard · Accepted Answer · 2012-01-09 10:06:36Z

4

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";

answered Jan 9, 2012 at 10:06

Richard

22.1k13 gold badges64 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

IAmGroot Over a year ago

So following the install, on the main page, Ive done step 1,2,3,5. they were straight forward.. But for step four, i dont know where the second part <dotless minifyCss="false" cache="true" /> goes. It says optional though, So am unsure why my stylesheet is not working.

Richard Over a year ago

that is optional. Did you not use Nuget to install? It is so much easier. I would recommend opening your stylesheet url directly to see if you are getting any errors. The most likely thing is that you are not serving .less files. Try adding the mime type bob.yexley.net/tag/less-css

IAmGroot Over a year ago

Will Nuget do all the config alterations too? :) How do i install with Nuget?

Richard Over a year ago

It will apart from the IIS Mime Type issue. See here for some Nuget Love: nuget.org

Richard Over a year ago

Check the direct url of the css for the error. it will show you where your are going wrong.

|

rfmodulator · Accepted Answer · 2012-01-09 10:14:16Z

1

If you want to stick with the MVC (and Razor) tradition then here is an interesting project that is available via NuGet.

answered Jan 9, 2012 at 10:14

rfmodulator

3,7583 gold badges21 silver badges23 bronze badges

2 Comments

IAmGroot Over a year ago

I like the concept, Though I dont see that it will be cached, and instead regenerated on each call. So would not be quite as effecient. Thanks though. Plus I cant get Razor recognised in the controller, and google wont tell me what using ref i should add.

rfmodulator Over a year ago

@Doomsknight Yup, just another option. It makes much more sense to have different CSS class styles defined for the variances, and assign those to the UI elements as desired...kinda like CSS was meant to used. :)

devdigital · Accepted Answer · 2012-01-09 10:08:45Z

0

It's also worth mentioning Sass - http://sass-lang.com/

Note that you can compile the CSS locally with Sass, so Ruby isn't required.

answered Jan 9, 2012 at 10:08

devdigital

34.4k9 gold badges102 silver badges122 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC3: Creating Colour constants in CSS

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related