CSS is really cool, but it lacks of some dynamism... for example, it uses classes but you can't extend them, and you don't even have variables... for that reason my solution is Magic CSS

What is Magic CSS?

Magic CSS is an attempt to make CSS more dynamic using variables and the ability to extend existent classes : )

What it does?

Well, it uses PHP, the idea is simple, you add a header like <?include("magic_css.php");?> in top of your CSS files and make your server interpret your CSS files as PHP, and that's it, your CSS should be dynamic now.

List of features

• Inheritance (you can extend classes!)
• Overloading (you redefine extended attributes!)
• Variables (you can define and use variables)
• Arrays (you can define associative php arrays)
• Comments (you can make //slash comments :D)
• You can still use embedded php (for things like <?=5*5;?>)
• Simple to use, just 1 line of php needed
• Interpreted on the fly

The example!

style1.css (Source)

<?include("magic_css.php");?>
//Finally! You can use comments :D!
//And also you can use variables! :D

$one=1;

//Strings with property values
$border='2px';

//strings with a complete property : D
$property='font-size:5em';

//strings with more than one property!
$class_contents="border:$border solid #333;$property;";

//entire classes inside a var!
$class5='.class5{
	font-size:5px;
	color:#555;
}';

//normal CSS class definition
//with embedded php
.class1{
	font-size:<?=rand(5,10);?>px;
	color:#555;
}

//extended classes!! O:
//and using the defined property value
.class2 extends .class1{
	font-size:1.${one}em;
}

.class3{
	border:$border solid #333;
	$property;
}

.class4{
	$class_contents
}

//adding one to our int : )
$one++;

//when we extend a class it uses the last value (1)
//but for the new declaration it will take the new value (2).
.class4 extends .class2{
	border-size:${one}px;
}

$class5

.... and the results are...

The Results!

style1.css (Results)

.class1{
	font-size:7px;
	color:#555;
}
.class2{
	font-size:1.1em;
	color:#555;
}
.class3{
	border:2px solid #333;
	font-size:5em;
}
.class4{
	border:2px solid #333;
	font-size:5em;
}
.class4{
	border:2px solid #333;
	font-size:1.1em;
	color:#555;
	border-size:2px;
}
.class5{
	font-size:5px;
	color:#555;
}

Source: _style1.css (source not interpreted)
Results: style1.css (interpreted results)

Download

Download Magic CSS Beta1

How to Install

• Download Magic CSS beta1 here (includes example and .htaccess file)
• Make your server run CSS as PHP:
  Simply add:

  AddType application/x-httpd-php .css

  to your .htaccess.
  If you don't have one, then create one. (Assuming you are running Apache)
• Put magic_css.php in the same directory where your CSS are going to run. (also same directory as your .htaccess file)
• Add

  <?include("magic_css.php");?>

  at the start of every CSS file you want to make dynamic.
• That's all, you can also just decompress magic_css_beta1.zip and put all files in some directory in your server, then run the example or make your own Dynamic CSS files.

ToDo

• If there is anyone interested I will continue developing this
• Caching
• SaveFile Option
• Better parsing without using eval so we can use $_GET in our CSS
• General improvements