Can I Specify Variable Names In A CSS File

Question

I am in the process of adding background images to a couple of hundred web pages. My app doesn't know until runtime which image to load. I have been able to get everything to work fine by changing the statement in some of the pages to contain the attributes I need plus variables for the image file name, etc:

<body style="margin:0; background-image: url(<%= strBackgroundImage %>); background-repeat: <%= strBackgroundRepeat %>">

While the above statement works, I would rather put the attribute info into a CSS file like this:

body {
    margin:0; 
    background-image: url(<%= strBackgroundImage %>); 
    background-repeat: <%= strBackgroundRepeat %>;
}

But this doesn't work. The attributes containing the variable names are ignored. How can I modify the above snippet so that it will work in my CSS file and still allow me to set the variables' contents in my code behind files?

Thanks.

You're HTML snippet looks like is using ASP.NET to put these values there because HTML is actually sent to the browser. — MarcinJuraszek, Dec 01 '14 at 23:17
possible duplicate of [define colors as variables in CSS](http://stackoverflow.com/questions/1875852/define-colors-as-variables-in-css) — Daniel, Dec 01 '14 at 23:20

score 3 · Answer 1 · answered Dec 01 '14 at 23:17

3

In short

No you cannot pass variables in CSS.

SASS or SCSS

SASS and SCSS support variables.

http://sass-lang.com/

LESS

LESS Supports variables too

http://lesscss.org/

answered Dec 01 '14 at 23:17

Rafael

7,605
13
31
46

score 0 · Answer 2 · answered Dec 02 '14 at 00:15

It is in fact possible to have serverside logic computed before transmitting the finished CSS file. To enable such a behaviour you need to add the .css file extension to the list of extensions that are passed to another interpreter (something like PHP or ASP) before transmission. But keep in mind that this procedure is way more resource consuming than the classic one.

So before implementing such a soluzion think about your applicazion, maybe you can avoid it by using pre processors like those mentioned by Rafael.

Can I Specify Variable Names In A CSS File

2 Answers2