As I mentioned in my Responsive UI Intro I am going to go over some of the responsive frameworks but in preparation for that discussion I wanted to discuss LESS which is a dynamic style sheet language used by several of the frameworks.
The idea of LESS is to extend CSS with dynamic behaviors such as variables, mixins, operations and functions to allow for a much richer and dynamic language. Now a lot of people might think why would this be needed CSS gives me everything I need to create dynamic sites and while that is true the power and flexibility LESS provides will benefit developers in two ways:
- Speed of development due to not having to define the same properties multiple times as you build out classes and pages.
- Maintenance becomes much faster and easier because you have to touch less properties to affect changes.
Let’s tackle each of the key items and their uses.
Variables
The first item is the variable. I’m sure everyone understands the variable but let’s talk specifically how LESS’s works and the syntax. Like any good variable the first thing to do is to define the variable. LESS uses the @ symbol to signify a LESS property so if we wanted to set a common color we would use the following:
@red: #ff0;
Now we can use this variable over and over again in our CSS like this:
header {
color: @red;
}
h1 {
color: @red;
}
Now when LESS compiles the CSS it will look like traditional CSS:
header {
color: #ff0;
}
h1 {
color: #ff0;
}
Mixins
Mixins allow you to actually insert all the properties of a class into another class by including the class name into one of its properties. You get the power of the variable but it includes multiple properties from a class as opposed to just one.
For instance you could do the following:
.rounded (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius
}
Then you can add these to your CSS like this:
header {
.rounded;
}
footer {
.rounded(10px); – here we override the initial 5px setting
}
Functions & Operations
Operations allow us to treat our CSS code like traditional code so that we can add, subtract, divide and multiple values to create variations on our base properties. Lets say we had set up the following variables:
@my-border: 1px;
@base-color: #111;
@red: #842210;
Now we can use those variables in operations in our CSS to create new values based on our core variables so we can create truly cascading effects. Below shows how the operations are set up and the corresponding values in CSS:
header {
color: @base-color * 3; (CSS: color: #333)
border: @my-border; (CSS: border: 1px)
border-bottom: @myborder * 4 (CSS: border-bottom: 4px)
}
footer {
color: @base-color + #003300; (CSS: color: #114411;)
border-color: desaturate(@red, 10%); (CSS: border-color: #7d2717)
}
So you can see pretty quickly how dynamic our style sheets can become using a combination of these techniques to create LESS lines of code to edit and maintain while still having great flexibility with our front end UIs.
The last thing to note in this primer on LESS is that LESS is a javascript based code and to create the CSS sheets that a browser expects all the variables, mixins, etc need to be compiled into a typical CSS style sheet. There are several ways to accomplish this today.
- Just like any other Javascript you could just include the LESS.js file in your header. This is a good solution while developing just because it’s easy but it does add some load time to the user while the CSS compiles before the page is displayed on their computer so probably not the best for production.
- User a server side compiler. You can use Node.js to compile the LESS files on the server so that the user isn’t processing this operation. This is available in several server-side flavors depending on your needs.
- Use a desktop app to automatically compile your files as you work. On the Mac there is a app for that of course. LESS.app actually watches local files for changes so that when you save they are automatically compiled and ready for use.
- Use the Crunch Editor. Crunch is a recent edition to the LESS scene and is an AIR based application for the PC and Mac that allows you to edit the LESS code in an easy WYSIWYG editor and then just export the final CSS files with the click of a button.
Hopefully this primer will get some people pointed in the right direction and be helpful to anyone that picks up some of the responsive UI frameworks that will be discussed next.
