Variables in CSS? - GoFuckYourself.com

Brujah · 07-04-2008, 09:06 AM

Is it possible to use variables in CSS? I have an html layout. I want to use one main css for structure and just decide on the colors based on a variable if possible. Can it be done?

darksoul · 07-04-2008, 09:08 AM

it can't be done with pure css afaik. But look into dynamically loading css files with javascript
that'll get your stuff done.

harvey · 07-04-2008, 01:11 PM

I'm not sure what do you exactly need, but if I'm getting you right, of course you can, and it's quite easy, check http://interfacelab.com/variables-in-css-via-php/

in action (from http://sperling.com/examples/pcss/ )

in action (from http://sperling.com/examples/pcss/)

Code:

<?php
header("Content-type: text/css");
$color = "green";        // <--- define the variable 
echo <<<CSS   
/* --- start of css --- */
h2
	{
	color: $color;  /* <--- use the variable */
	font-weight: bold;
	font-size: 1.2em;
	text-align: left;
	}
/* --- end of css --- */
CSS;
?>

I already made a few projects using this method and works like a charm, in conjunction with XSL/XML environments is a real help

then again, not sure if this is what you're looking for

harvey · 07-04-2008, 01:14 PM

aaah, now I see you want html and not php... well, there are ways, but don't remember exactly how since I didn't pay much attention because it was too much work for the result

StuartD · 07-04-2008, 01:23 PM

Strangely enough, you can do it in IE but not any other browser. Go figure, the one browser that does CSS the worst....

In IE... you can do this:

<style>
#column1 {
width: expression(document.getElementsByTagName('body')[0]) / 2);
}
</style>

In IE, you can use javascript within the expression brackets. But every other browser will ignore it.

You can

StuartD · 07-04-2008, 01:27 PM

Wow, gfy makes posting slow...

Anyway, I was going to finish with:

You can do it that way to avoid using php if you don't know it or have it readily available but php will give you way more control.

Kard63 · 07-04-2008, 01:34 PM

What is your avatar Stuart? It looks like a fox turning into a sea creature and humping the earth.

StuartD · 07-04-2008, 01:35 PM

Quote:

Originally Posted by Kard63

What is your avatar Stuart? It looks like a fox turning into a sea creature and humping the earth.

Heh, pretty damn close actually.

It's a 3d representation of the Firefox logo.

brandonstills · 07-04-2008, 01:56 PM

If you use a dynamic language like PHP to generate it. It's more difficult if the file ends in .css because you would have to configure apache to treat it as PHP (which also slows the request down), but if you do it as an embedded CSS in a PHP file this is definitely possible.

There was some talk of CSS variables recently but until it becomes standard in all browsers I don't see a point in looking into it.

Brujah · 07-04-2008, 02:05 PM

Some good suggestions, and I can definitely work with these. Thanks.

07-04-2008, 09:06 AM	#1
Brujah Beer Money Baron Industry Role: Join Date: Jan 2001 Location: brujah / gmail Posts: 22,157	Variables in CSS? Is it possible to use variables in CSS? I have an html layout. I want to use one main css for structure and just decide on the colors based on a variable if possible. Can it be done? __________________ Free Premium Domain Lists and Tools at Clickmojo.com For Sale: Obscenity.com

07-04-2008, 09:08 AM	#2
darksoul Confirmed User Join Date: Apr 2002 Location: /root/ Posts: 4,997	it can't be done with pure css afaik. But look into dynamically loading css files with javascript that'll get your stuff done. __________________ 1337 5y54\|)m1n: 157717888 BM-2cUBw4B2fgiYAfjkE7JvWaJMiUXD96n9tN Cambooth

07-04-2008, 01:11 PM	#3
harvey Confirmed User Industry Role: Join Date: Jul 2001 Location: 127.0.0.1 Posts: 9,266	I'm not sure what do you exactly need, but if I'm getting you right, of course you can, and it's quite easy, check http://interfacelab.com/variables-in-css-via-php/ in action (from http://sperling.com/examples/pcss/ ) in action (from http://sperling.com/examples/pcss/) Code: <?php header("Content-type: text/css"); $color = "green"; // <--- define the variable echo <<<CSS /* --- start of css --- / h2 { color: $color; / <--- use the variable / font-weight: bold; font-size: 1.2em; text-align: left; } / --- end of css --- */ CSS; ?> I already made a few projects using this method and works like a charm, in conjunction with XSL/XML environments is a real help then again, not sure if this is what you're looking for __________________ This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth

07-04-2008, 01:14 PM	#4
harvey Confirmed User Industry Role: Join Date: Jul 2001 Location: 127.0.0.1 Posts: 9,266	aaah, now I see you want html and not php... well, there are ways, but don't remember exactly how since I didn't pay much attention because it was too much work for the result __________________ This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth

07-04-2008, 01:23 PM	#5
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	Strangely enough, you can do it in IE but not any other browser. Go figure, the one browser that does CSS the worst.... In IE... you can do this: <style> #column1 { width: expression(document.getElementsByTagName('body')[0]) / 2); } </style> In IE, you can use javascript within the expression brackets. But every other browser will ignore it. You can __________________ This is me on facebook This is me on twitter

07-04-2008, 01:27 PM	#6
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	Wow, gfy makes posting slow... Anyway, I was going to finish with: You can do it that way to avoid using php if you don't know it or have it readily available but php will give you way more control. __________________ This is me on facebook This is me on twitter

07-04-2008, 01:34 PM	#7
Kard63 Confirmed User Join Date: Nov 2003 Location: 237 619 975 Posts: 8,944	What is your avatar Stuart? It looks like a fox turning into a sea creature and humping the earth. __________________

07-04-2008, 01:56 PM	#9
brandonstills Confirmed User Join Date: Dec 2007 Location: Chatsworth, CA Posts: 1,964	If you use a dynamic language like PHP to generate it. It's more difficult if the file ends in .css because you would have to configure apache to treat it as PHP (which also slows the request down), but if you do it as an embedded CSS in a PHP file this is definitely possible. There was some talk of CSS variables recently but until it becomes standard in all browsers I don't see a point in looking into it. __________________ Brandon Stills Industry and programming veteran [email protected] \| skype: brandonstills \| ICQ #495-171-318

07-04-2008, 02:05 PM	#10
Brujah Beer Money Baron Industry Role: Join Date: Jan 2001 Location: brujah / gmail Posts: 22,157	Some good suggestions, and I can definitely work with these. Thanks. __________________ Free Premium Domain Lists and Tools at Clickmojo.com For Sale: Obscenity.com