Posted by: Peter Andrease

Posted on: July 6, 2012 2:00 pm

-

How to use less css for your next web project – part 1 of 2

The benefits of Less are clear as soon as you understand it.

So what is it?

Less speeds up css development in several different ways. It can be used for the following:

  • Variables
  • Mixins
  • Operations
  • Functions

Variables

If you’re any kind of web designer you’ll know what a variable is. You specify something and then call it later somewhere else as many times as you like and once you’ve changed the variable all the calls will change too. So imagine having all your titles across a site in the colour black, the site is huge and you’ve used all the h’s and added special classes to target special circumstances. Imagine being able to change it one line of code! Well you can with less…

variables

Mixins

Mixins means you can put all of the properties of a class into a different one. This means instead of writing out the code or copying and pasting it again. You can use a mixin which works a lot like the variable. Mixins also allow you to add functions, see below….

mixins

Next week we’ll round up the tutorial with Nested Rules and Functions & Operations.

Peter Andrease

Peter Andrease

Peter heads up the entire web design team at our agency and enjoys delivering interesting posts that deal with brand new design tips, tricks and tools. As his strengths also lie in client training, Peter has also produced a huge number of tutorials on the subject of design, many of which can be found elsewhere on the site.
-
-

Tags: , ,

Authors
Categories
Archives
Blogroll