A big problem we always have when we create a complex website is organizing the CSS properly. We add comments, we split it into files but the stylesheets still get pretty big if the project is very complex. Not only that but there are also a lot of browser specific CSS properties (such as -moz-border-radius) which make changing something (like the border-radius) very difficult.
Well, there is something out there that can help us organize better and it is called LESS.
The LESS CSS preprocessor has been out for some time and is well known by only a few developers. It basically enlarges the limits imposed by CSS’s simplicity and allows the code to be compiled into “real CSS”. The coding style of LESS was thought to be a simplified but extensive variant of CSS so regular CSS code writers wouldn’t need too much time migrating to this tool.
Why the need?
As a regular CSS developer you might think why should anyone consider using this tool? Will it make my coding struggle easier? Will it really change CSS as I know it?
Actually yes; and … no. The LESS preprocessor makes you life easier by using simpler blocks but exactly the same syntax so that you will only give up writing unnecessary lines or curly braces for example.
In the following paragraphs, I guarantee that you will find it very useful. The article will explain the install process for LESS, using Nesting for simpler coding, how variables can be used for easier maintenance, how to reuse entire object classes so that you don’t repeat yourself but also operations and namespaces that will ease up your coder life.
Installing the LESS
While many of you are already acquainted with many installs, the LESS install is no different. I should begin by pointing out the structure of a CSS preprocessor; it has two components that are essential: the compiler and the language. Both are equally important and if one of them is broken your work is useless.
LESS language is almost identical in syntax to CSS with the addition of several features. What generates the browser ready code is called the compiler which literally compiles the code you write in a language that the browser understands and is able to process.
LESS is not tied to a single compiler compared to other CSS preprocessors but has a wide range of compilers that work with it: there is a PHP compiler, .NET, Javascript, Ruby Gem and even an OS X app. What I and many other web developers that use LESS recommend is the Javascript version as it’s the easiest version to comprehend.
Making the LESS Javascript Compiler available for use is simple and it’s done in two simple steps that anyone can do, even non-CSS programmers.
- Step one requires the insertion of the LESS script in your HTML coding. This means that LESS will be processed in real time during page loading.
- Step two involves including the LESS file in the code that you write.
The following example shows how to do that and even shows you how to include the script without even downloading it. You just use it from the official server. All you have to do is make sure that the style sheet link is placed before the script in order to guarantee the load and readiness for preprocessor use and the address to the .less file is correct in the href field.
1 2 | <link rel="stylesheet/less" href="/path-to-stylesheet/main.less" type="text/css" /> <script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script> |
That’s all you have to do in order to use the CSS LESS preprocessor. In the following paragraphs I will show you how this tool makes your life easier.
The use of Nesting for a more transparent code
Even though the CSS has been around for some years, by now the rules must be written separately which mean you have to repeat using the same long selector again and again. The example below shows exactly what we all don’t like:
1 2 3 4 5 | .header {} .header .navigation {} .header .navigation ul {} .header .navigation ul li {} .header .navigation ul li a {} |
How can LESS ease your burden? It allows nesting and that means you can create hierarchies and write less with more comprehension:
1 2 3 4 5 6 7 8 9 | .header { .navigation { ul { li { a {} } } } } |
I haven’t written any CSS properties so that you would understand better how the nesting works. With this option you eliminate CSS’s need for repeating the same selector on many lines. By nesting the rule inside the { } of a selector you also show the hierarchy and C++ programmers will understand what I am saying. Needless to say, nesting is a very efficient and useful option that LESS offers.
Another thing that the LESS offers in terms of nesting is the pseudo-classes nesting which allows you to embed things like :hover, :active or :visited just by using the “&“.
1 2 3 4 5 | a { &:hover{} &:active{} &:visited{} } |
You decide if this makes your work easier or not.
Easier maintenance by using Variables
On a normal basis, an entire website uses a palette of colors that the Web designer chooses. If you want to use a certain color for a header or footer or any other object you have to write the instruction to assign the respective color throughout the entire code for each and every object.
What happens when you want to change the color of a specific object? You can do that very easily by searching and replacing the color as you wish.
But what happens when you want to change the color of more objects fast and easy? Do you use the same tool as earlier to search through tens of thousands of code lines and replace 50-100 object colors?
If you don’t use LESS you probably do but as you will see in the following code, LESS allows the use of variables wherever you want and you can only use their name in the { } of the respective object so all colors can be changed automatically when the value of the variable is changed.
1 2 3 4 | @main-color: #195787; .header { background-color: @main-color; } .footer { color: @main-color; } h3 { color: @main-color; } |
The LESS compiler checks the local define of the variables when it needs to replace the name of a variable with the value and if it cannot find it, it goes up the hierarchy until the respective variable is found and replaced.
1 2 3 4 5 | @great-color: #195787; .header { @great-color: #aacc22; color: @great-color; } |
Entire Class recycling
When it comes to variables, LESS makes using them easy but what do you do when entire classes need to be reused so that you don’t end up writing them many times?
You can create new classes for already defined properties and reuse them in other rule sets that you may find useful. The example below will show you how to create a new class for an already specified property and reuse it in another set of rules:
1 2 3 4 5 | div.block { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } |
6 7 8 9 10 11 12 13 | .rounded-corners { -webkit-border-radius: 5px; -moz-border-radius: 5px; borders-radius: 5px; } div.block { .rounded-corners; } |
If you want even more control over a property, you can always use parameters to create a customized result. At first, you just have to initialize the parameter with the desired value.
1 2 3 4 5 | .rounded-corners(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } |
Here is the final result:
1 2 3 | div.block { .rounded-corners(3px); } |
Pretty cool.
Does LESS allow any kind of operations?
Yes, in fact LESS makes life way easier with their operations. Instead of defining numerous variables for all sorts of color grades that are similar and could be obtained from a single one by reducing brightness, you can perform operations on colors that are already defined in variables thus eliminating the need of using additional variables.
In conclusion, you can darken or light colors just by adding an operand followed by a value instead of tremendous variable defining.
The following example shows exactly that:
1 2 | @margin: 10px; .header { margin-top: @margin + 10px; } |
The best thing about it is that you can alter an entire web site color palette by using a single variable defined color and operations throughout the code.
Can I group variables and classes furthermore?
LESS allows that too. You can do that by using nesting under an id recognized by LESS. In the example below, classes are grouped underneath a #defaults.
1 2 3 4 | #defaults { @heading-color: #ff3300; .bordered { border: 1px solid #ccc; } } |
After grouping such variables and classes you can use
5 6 7 8 | h1 { color: #defaults[@heading-color]; #defaults > .bordered; } |
to identify and use them wherever you need.
A thing that LESS imports from C++ code is that you can create single line comments with “//” and also import other LESS customized files by using @import in exactly the same way as if you would do that in CSS.
1 2 | @import 'fonts'; @import 'layout'; |
Conclusion
You can use SASS too as an alternative for LESS but SASS brings very different coding language as well as syntax compared to CSS. I think you will find what you want in time with the sole condition that you experiment all the time and let nothing escape the scrutiny.
Now, after reading this humble introduction to CSS preprocessing, I hope that you understood why LESS exists and why you can ease up your coding life just by using simple coding language no different from what you already know; just simpler and more logical.
You can use whatever compiler you may want as the list is long and the preferences vary from coder to coder. The tutorials for installing different compilers are available on the official sites of each one and I invite you to use whatever you want as long as you keep on coding and improving your skills in Web development.
But a question remains; why didn’t the CSS designers thought of it in the first place and additions such as LESS or SASS were needed after all these years?
