Dynamic features such as Variables and Functions in CSS have been a hot topic of debate for a while. On one hand, programming-oriented people have been begging for these to be included in the next CSS installments, while countless others are pointing out the difficulties of including these inside CSS rules themselves. One of the main arguments against the Variables use is that it will be much harder to learn and decipher other people’s CSS if developers start naming their own variables for everything.

However, I think languages like Sass make a great compromise. Sass is a higher level language floating above CSS that allows Variables, Mixins (aka functions) and more readable code, while spitting out regular CSS code in the front-end. Visitors to your site can still see regular CSS code, but you can organize it by using a higher level language like Sass on your end.

Here are some of the main ideas behind the Sass language:

table

  padding: 2px

  td.p

    text-align: left

#content

  font:

    family: serif

    size: 1.1em

  p

    line-height: 1.5em

This would generate the following CSS:

table {

 padding: 2px;

}

table td.p {

 text-align: left;

}

#content {

 font-family: serif;

 font-size: 1.1em;

}

#content p {

 line-height: 1.5em;

}

As you can see, the Sass version groups and nests elements for easier readability and less size.

Define Variables in the beginning, like this:

!fontColor = #333333

!padding = 8px

You can then use these variables going forward like this:

#content

  color = !fontColor

  padding = !padding

  p

    padding = !padding / 2

If you’re not familiar with variables in programming languages, the main advantage to using variables is to define them once in the beginning and then use them throughout the code. This is useful if you are using the same colors or spacing sizes over and over. Later down the line, it makes it easier to just change the value of the variable in the beginning, than to change 20 different CSS rules.

Also, as you can see in the above example, Sass allows you to use basic math functions for further customization.

Mixins are equivalent of functions in programming languages. While variables let you reuse one property at a time, mixins lets you reuse whole sections of the code at a time.

First, you define the mixins like this:

=tableDesign

  table

    th

      text-align: center

      font-weight: bold

    td

      text-align:left

      font-weight: normal

or even specify arguments:

=left(!space)

  float: left

  margin-right = !space

Then you can use mixins like this:

#content

  +tableDesign

  +left(5px)

This will produce the following CSS:

#content table th {

 text-align: center;

 font-weight: bold;

}

#content table td {

 text-align: left;

 font-weight: normal;

}

#content {

 float: left;

 margin-right: 5px;

}

Overall, Sass gives you a smaller, more readable code, as well as the power of reusing code with variables and mixins (something many developers have asked for) while at the same time spitting out regular CSS code in the end.

Now, there are still some issues of using these higher-level languages, and I just want to point a few things out.

1. Don’t use these languages unless you know how CSS works inside and out.

I wouldn’t advise for someone new to bypass CSS and just start with a higher level language like this. You should really know what goes on behind the scenes, similar to how Dreamweaver and other WYSIWYG tools can be detrimental if a person doesn’t know basic HTML or what goes on under the hood. However, if you know how to code HTML by hand and know how Dreamweaver works, you can use it to your advantage for HTML content formatting to save time. Similar rules apply here.

2. It may get slightly problematic if you’re sharing your work with other people.

If you’re a sole developer, you should have no problem using your own code. Even if you work within a team of developers, I believe Sass can be utilized for everyone’s benefit. Even though some may loathe the idea of learning yet another language, if you know CSS and basic concepts of variables and functions, this should take you about 5 minutes to pick up. If you’re not familiar with programming concepts of variables and functions, it may take 20-30 minutes but overall this should be easy to grasp for a developer.

The only way this may cause problems is if you’re sharing your work with other developers, or if you’re transferring your site to another developer outside of your team and they just don’t want to deal with anything new.

3. While Sass seems to be a relatively supported language, beware of others that may be more buggy.

As far as I know, Sass seems to work just fine. However, there are many other dynamic languages and implementations out there without any standards or support. It’s important to do your research and beware of buggy platforms. You want to use these languages to simplify your life. If the platform itself is buggy (i.e., generates wrong CSS code at times), there is no point of using it, as it will cost you more time and headaches.

Other Platforms and Examples

Sass runs on Ruby. I don’t believe they have made it to work on PHP yet, but here are some other dynamic CSS implementation examples:

• xCSS framework – This is an object-oriented CSS framework that runs on PHP5 and has limited overhead.
• “Supercharge Your CSS with PHP” tutorial – Even though I’m not too crazy on this one, as it does not make the readability better, you can basically use PHP to dynamically write to CSS.
• Variables in CSS – Here’s another way to introduce variables in CSS via PHP. I find it better for readability than the above example. Although this one still doesn’t have the Nesting or Mixins ability like Sass. It is also developed by one person without any community support.

Who knows, perhaps in the future Variables and Functions will become part of the next CSS standards. But for now, these higher level languages can be useful in the right hands.

If you have any other good dynamic CSS implementations, please feel free to share!

Bookmark this post: