Get started with CSS pre-processing

Nov 13, 2012 by

This entry was written by , one of the OxonDigital members. The author's views below are entirely their own and may not reflect the views of OxonDigital.
Get started with CSS pre-processing

I love CSS, you love CSS, but let’s admit it does have some limitations. Have you ever noticed yourself typing the same selector again and again?

Example

#kittens {padding:20px;}
#kittens h1 {color:#666;}
#kittens p {color:#FFF;}
#kittens .pullquote {float:left;}

Look familiar?

If you’re anything like me, you will have been in this situation before. But, what if we could nest those rules like so;

@brandprimary:#666;
#kittens {
padding:20px;
h1 {color:@brandprimary;}
p {color:#FFF;}
.pullquote {float:left;}
}

Still with me?

In the example above, all the rules related to #kittens are nested within the #kitten selector. Therefore, we only need to write it once. Also I have snuck in a variable called @brandprimary which has the colour value of #666, this can be used anywhere.

section {background-color:@brandprimary;}

So imagine this, last minute the client has decided the brand colour needs to change! We need to go through our stylesheet and change this – ughhh! Using a variable means I only need to change our variable @brandprimary from #666 to #33CCFF and voila!

Let me introduce the star of the show – LESS CSS

LESS extends CSS with dynamic behaviour such as variables, mixins, operations and functions.

Development

This is just the tip of the iceberg, once you understand LESS it can really speed up your code writing. I would suggest messing around with it at home in your free time, so you can fully understand its capability and then start using it in your live environment.

Making LESS into CSS

You have a couple of options which can be split into two categories

  • Client side – Applications.
  • Client side – Executed in browser.
  • Server side – Happens on the server.

Other pre-processing languages

LESS is not the only one, there are others with the same idea at their core.

  • SASS – Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  • Stylus – Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Further reading

Industry figures

To finish

Overall, I think pre-processing can be a great time saving way to write CSS. Paired with my code editor of choice (Sublime Text 2) and its plugins, which I would be happy to share my thoughts on as well, I would estimate that it saves me about 20% of time writing mark up and styling.
Do you think pre-processing has any use in your development process? Perhaps you already use pre-processing? I’d welcome your thoughts.

I'm Shannon Young, a cool guy who likes to code. I work at mark-making* as a Digital designer/developer and I love it. I play Diablo 3 a lot and don't like outdoors, but I do like Monster Munch.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close