CSS files can become quite large/ cumbersome. Additionally, there are some issues with CSS. These include:
- not having an ability to use math (for example take current border width and add 5 pixels to it),
- not being able to reuse common styles
- not being able to modify existing values
- not being able to specify variables (and define them with initial values).
I downloaded and installed CodeKit on my Mac. I then pointed to a folder where I placed some sample HTML and a could of .less files. Let’s examine these files. The simple HTML file is shown below. Note that lines 8 and 9 have been commented out. This would be one approach to dynamically generating the CSS file from the LESS file (but it would be very inefficient).
There is nothing that special about the HMTL. There is a wrapper division which contains a main and sidebar. There is also a header and footer. We will be styling the majority of these elements. We want the main and sidebar to represent 2 separate columns (side by side). When you examine the CSS, you will probably think – there are alternate approaches to styling (or I can do better). You are correct. I am focusing on the use of LESS to generate the CSS and have made this a somewhat contrived example.
The first file we should examine is definitions.less (below).
It looks a lot like CSS (with included comments). One major difference is the use of the @ symbol to define variables. By including variables in a separate file and then importing it into another file, we begin to approach CSS as we would any other programming language. I can also then make changes to one spot and all the generated CSS will change accordingly. Note the names of the variables are arbitrary.
The next file contains the bulk of the code. If you want to examine any of these files, skip to the bottom of this post and you will find a link to an archive you can download. I called the next file generated.less. I included some initial documentation and them imported the definitions (line 15 below).
A core concept with LESS is something called a mixin. An example is shown below. Think of this as a group of properties which can be used repeatedly. One can also include variables within the mixin. The naming is similar to a class.
.commonStyle is the mixin. Note that is is mixed in both the header and footer element styles. I simply changed the foreground and background colors in the header and footer. The remaining properties are the same (hence the use of the commonStyle mixin). Hopefully, you are starting to see the value in LESS. We can easily change the value of a variable and it will instantly ripple throughout the generated CSS. We could also add properties to a mixin and it would replicate as appropriate. Next time you examine a CSS file you have created, think of how much easier it might have been to group common items and have variables when you were writing it.
We can also nest styles. In the code snippet below you see that being done.
In the above example, we establish a font for the body element and nest a different font for the sidebar identifier (within the body element). I know this is a very simple example. Hopefully you are already thinking how this could be applied in a broader sense.
We can also include plain CSS as needed. This will simply be passed through the generation process unaffected. For our purposes, I created 2 columns and just coded the CSS without use of any variables.
Next, we unlock the power of LESS using functions. In the example below, I am applying hue, saturation, and lightness values based on the color provided. I am then using the fade function to lighten the color to 60% of its original value.
All the above will become proper CSS when run through CodeKit. If you have sharp eyes, you may also notice I did some simple math with the color variable. @colorText originally contained #009. I added #c00 to it generating the new color #c09. I find this most impressive. As long as you dream in rgb or hex, you can easily change colors on the fly (as they relate to other colors).
Lastly, I dynamically change the width of a border in the snippet below.
@borderwith was originally set to 1 pixel. On line 104 above, I add 5 more pixels (for a width of 6 pixels). I also use the lighten function to affect the color. You can examine the source code (link below) and the actual example for more details.
Once I make any change to a file in the folder I have linked in CodeKit, the CSS is automatically generated. I receive the message below (if successful) or a log error message if I make a mistake (such as unbalanced braces or parentheses).
If one examines CodeKit, one see all the files and the results (below).
I encourage you to examine the CSS in my working example. Obviously you will need to view the source code (and focus on the CSS). Note all the CSS is generated form these 2 .less files using CodeKit.
This weblog post was inspired by the CSS with LESS and SASS course at lynda.com by Joe Marini. If you wish to learn more about LESS, I recommend that course. If you do not have ready access to lynda.com tutorials, you could also review the website Learning LESS.
As always, I am interested in feedback. Did you find this overview useful? Are you inspired to further investigate LESS? I look forward to your comments.