Declaring Variables In CSS

The new CSS Variable feature, One of the most frequently asked, most wanted, most awaited requests by web designers is “Can CSS declare variables?”. And finally that question has been answered by the W3C. After a lot of discussion, finally the CSS Custom Property to define variables in css can be implemented. This feature of course allows css code writers to specify variables to be used repeatedly in css documents.

To try it you can use Mozilla Firefox Nightly from version 29 or later.

References to variables can be made in property values ​​using the var() syntax.

Image Credit : IaRuth

Custom properties that declare variables must all be named starting with var-. Custom property values ​​must be unique. All can take almost any token stream, as long as it’s balanced.

For example, an author would declare some common values ​​in the style rule that match the root element, so that they would be available for every element in the document.

:root {
var-theme-colour-1: #009EE0; // Blue
var-theme-colour-2: #FFED00; // Yellow
var-theme-colour-3: #E2007A; // Red
var-spacing: 24px;
// var-xxxx to create another variable, the variable condition must be prefixed with var-
For Cross Browser maybe you can use the following syntax.
:root {
/* Cross Browser */
-webkit-var-theme-colour-1: #009EE0;
-moz-var-theme-colour-1: #009EE0;
-ms-var-theme-colour-1: #009EE0;
-o-var-theme-colour-1: #009EE0;
var-theme-colour-1: #009EE0;

-webkit-var-theme-colour-2: #FFED00;


Variables can be referenced at any element position in the value of other properties, including other custom properties. The variables in the stylesheet above can be used, for example, as follows:

h1, h2 {
/* Cross Browser */
color: webkit-var(theme-colour-1);
color: moz-var(theme-colour-1);
color: ms-var(theme-colour-1);
color: o-var(theme-colour-1);
color: var(theme-colour-1);
h1, h2, p {
margin-top: var(spacing);
em {
background-color: var(theme-colour-2);
blockquote {
margins: var(spacing) calc(var(spacing) * 2);
padding: calc(var(spacing) / 2) 0;
border-top: 2px solid var(theme-colour-3);
border-bottom: 1px dotted var(theme-colour-3);
font-style: italic;
Next create the html syntax as follows.

The title of the document

A witty subtitle

Please consider the following quote:

Text of the quote goes here.

then the result is like this:


Variables are resolved based on the value of the variable in the element property with the variable reference applied. If the H2 element has style=”var-theme-colour-1: black” above it, then H2{color: var(theme-colour-1);} will by default be resolved using the value in :root.

A variable reference can also include a fallback for use in cases where the variable is not defined or is invalid (due to being part of the variable reference cycle). The first rule in the stylesheet uses variables which are written as follows:

h1, h2 {
color: var(theme-colour-1, rgb(14, 14, 14));
which will result in a dark gray color if the theme-colour-1 variable is not defined on any of the heading elements.

So a brief introduction about using variables in CSS, for more info please read the official W3C document