Use of CSS Properties with Variables

Advanced CSS with Variables:
CSS Level 2 Recommendation effects the Web authors' community that has been requesting a way of defining variables in CSS.

Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.

If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair.

Example:

#
@variables {
#
CorporateLogoBGColor: #fe8d12;
#
}
#
#
div.logoContainer {
#
background-color: var(CorporateLogoBGColor);
#
}

The Same thing we can define in PHP also. For that thing firstly, you need to create php page for the content. Following example shows how:

Example:

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

For more information regarding this, visit:
• CSS Variables
• How to create CSS Variables?