It wasn’t very long ago that I first began to get into CSS precompilers such as SASS (Syntactically Awesome Stylesheets) and LESS (The Dynamic Stylesheet Language) and I had been hooked on the idea since. When I finally had a new project come up, I leapt at the opportunity to try out one of these languages.
Introduction
To be honest, I was hesitant at first to add either framework as I didn’t really know much more than what I had read on their homepages, and I didn’t like the idea of adding too much complexity to a project - I couldn’t guarantee I would be the only person to support it in the future.
Thankfully, both of these languages just add things into CSS. You don’t HAVE to know LESS or SASS to do anything, you can still do your old school CSS, and your output will be the same. However, when you want to start doing more advanced things such as variables, mixins, and color functions, the functionality is all there for you to utilize.
From what I had read, SASS has a few more features than LESS, which is why I initially tried to figure out how to incorporate it into a MVC 4 project. However, through my research, I couldn’t find a way to accomplish this without including some bit of the Ruby on Rails framework on the computer running it, and I hated the fact that I had to do that. Besides SASS, there is little chance of me getting into the RoR framework, at least in the next couple years. So in the end, I settled with using LESS.
Features
So, what can LESS (or SASS) do for you? There are several reasons I have come to love it in the past few weeks.
1 – Constants
Using LESS, you can finally declare a constant and use its value across an entire CSS file. The case that most people would be familiar with is colors. Wanting to declare one or two color variables that comprise the theme of the site, and not have to retype out their specific hex code each time, but rather a variable name. What’s great about this is that if you end up having to change it, you only have to change it in one place.
An important thing to note is that you aren’t limited to creating constants just for colors, but for strings and measurements as well.
2 – Inheritance
This is a cool feature in my mind for simplicity and organization. Both LESS and SASS allow you to place selectors within other selectors, and when it is compiled, the languages will break the rules out as necessary and keep the inheritance chain you created in the selectors.
Example LESS Code:
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
Example Compiled CSS:
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
3 - Mixins
Mixins are where languages like this really shine. The ability to mixin other definitions setup a parametric mixin. There is really a lot of content in this area, so I would suggest looking at http://lesscss.org for more information. One of the things I would suggest if you do begin to use LESS is to also grab the mixins.less file from the Twitter Bootstrap project. This file already has a bunch of predefined mixins for things like border-radius with all of the browser specific prefixes. This alone is of great use!
4 – Color Functions
This is the last thing I wanted to point out as my final post in this series will be utilizing these functions in a more drawn out manner. Both LESS and SASS provide functions for getting information from a color (R,G,B,H,S,L). Using these, it is easy to define a primary color, and then darken or lighten it a little for your needs. Example:
Example LESS Code:
@base-color: #111; @red: #842210;
#footer { color: (@base-color + #003300); border-left: 2px; border-right: 2px; border-color: desaturate(@red, 10%); }
Example Compiled CSS:
#footer { color: #114411; border-left: 2px; border-right: 2px; border-color: #7d2717; }
I have found that these can be very useful and powerful when constructing a site theme.
Conclusion
I came across LESS and SASS when looking for the best way to implement some type of CSS variables for colors, because I hated having to do a Find and Replace in all of the files using the colors, and in some instances, you couldn’t just find/replace because of the color choices interfering with other colors (color to replace of #000, yet come colors existed like #0002bc). So in many cases I would end up having to do a Find and manually check each one.
In my next post, I am going to cover how I’ve come to set up these items and the structure for the items in the project, as well as the conventions that I have come to start using. In the final post in the series, I will cover a neat little side project I built in LESS dealing with colors!
