When Cascading Style Sheets (CSS) first entered the scene, it was very much an enhancement, or add-on, to your site.
Sites sprung up espousing the virtues of separating content and presentation and it wasn't long, relatively speaking before it became the de facto way of getting your site to look good.
As CSS became more of a browser standard, and we were able to use more of its potential, site CSS files started to become a bit unwieldy.
Early methods of dealing with this were to have separate files for different areas but that simply swapped one issue for another, i.e. many server requests which was bad for optimisation.
Enter the CSS Preprocessors; Sass and LESS being the main two. Originally we had Sass which at the time used indented syntax to separate out its code blocks, and as a result, the take up wasn't as great as it could have been. LESS was inspired by SASS but was leaner and looked a lot more like the CSS people were familiar with, this IMHO, helped its take up. Not to be outdone, Sass evolved to have a similar syntax called SCSS (Sassy CSS) and these days the differences are, for the most part, personal choice.
So what should I choose Sass or LESS?
To be fair, both do a great job and if you have a free choice look at their documentation, give each a try and go with works for you.
However, it is not always that easy to have a free choice. You might not be able to call the shots on a project either down to your role or some other factor like the framework you are using already uses one of them. Also, how you compile the source files might have an impact on your choice, we use Gulp and can compile both, so for us, it’s not really an issue and for the day to day tasks you really should be comfortable with Sass and LESS.
So what are the advantages of using a CSS Preprocessor?
When you first get started, the 3 biggest advantages are:
- Separate source files
- Variables
- Nested CSS selectors
1. Separate source files
The ability to have lots of little files that do a specific presentation task is great from a development perspective. Maintenance of a site becomes that much easier when can split up the presentation into distinct parts that then get compiled together to become the whole site. The downside to this, of course, is if you don't have the original source files then while you can edit the compiled CSS its not ideal and can take a lot longer to do simple changes. So, if you inherit a site from someone else, always make sure to ask if there are any source files you need for the CSS.
If you are looking for a business case for changing to a CSS Preprocessor then this is the one - time is money - and you will save a lot of time, long-term, by having the files separated out like this.
2. Variables
Continuing with the basics, another great help in the time saving is the ability to use variables instead of hard-coded values, some might argue this is what it’s all about and all the rest is just gravy. No longer do you have to do search and replace and hope you get all the correct terms. Instead, you have a single file with all your variables. These variables are then available to be used, assuming you have set up your structure correctly, in all your other source files. So, when your designer asks for a colour change over half a dozen buttons it’s no longer a huge deal to make sure you get them all.
3. Nested CSS selectors
While you don't want your CSS to be too specific unless it needs to so it overrides an existing rule, nested CSS becomes a lot easier to read and as a result, it's a lot easier to manage. You don't even need to restrict yourself to full CSS selectors for nesting. If a number of selectors have the same starting string and state a different suffix then you can start with the common string and nest the suffixes in as required.
Other considerations
This has been a very simple introduction to get you thinking about CSS Preprocessors. We have by no means touched on all the benefits of them, that will be for later posts, but even if all you do are the 3 basic points we mentioned above then your foray into the world of CSS Preprocessors will be worth it in the time you save from project to project. Once you get the basics under your belt you can start to look at more advanced features.
- John
