Tip: Use variables in your CSS to simplify themeing

Posted by SolidShops on July 07, 2011 at 09:30 AM

Writing great CSS is an art in itself. Web designers are always pushing the limits of our favorite markup language. There have been a few cool initiatives like the LESS css preprocessor to make the use of variables possible inside CSS.

With SolidShops however, you don’t need the overhead of additional libraries, just use our simple templating language to assign variables or even write if/else structures inside your CSS files.

Here’s a small example to give you an idea of how you can make writing CSS easier by using variables inside your stylesheets:

{% set roundness = "5px" %}

.roundit {
-moz-border-radius: {{ roundness }};
-webkit-border-radius: {{ roundness }};
border-radius: {{ roundness }};
}

If you want to change the roundness of your elements with class .roundit, just adjust the variable on top once instead of manually updating every single occurrence of the border-radius property.

I’m sure that you designers and developers out there have many more creative ideas on how to use this for your own benefit. If you got some ideas to share, post them in the comments below and we’ll add them to this post!