A Tale of Two CSS Preprocessors
--
Ahhh… CSS. How we would be where we are today without it. For those who do not know, CSS was first proposed in 1994 by a man named Håkon Wium Lie. After its release, the world of Web Development would be changed forever.
12 years after the creation of CSS, otherwise known as Cascading Style Sheets, programmers looked to add further functionality to the original language by creating SASS. This new preprocessor was first designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.
SASS, which stands for Syntactically Awesome Style Sheets, not only has a great name but additional features to enhance coding productivity. These include keeping large templates efficient and breaking stylesheets into smaller, more palatable files. One key thing to know is that SASS is coded in Ruby, which means it is processed on the server-side. A few advantages to using SASS are the ability to define variables by beginning the variable with a dollar sign “$”, as well as nesting code blocks into the styling sheet. For example:
- $main-color: (insert color hex here).
You are then able to call upon this variable throughout the document. SASS supports four data types listed here:
- Numbers
- String
- Colors(name, or names)
- Booleans
As for nesting, you are allowed to style the parent element and the child element within the same curly brace on the style sheet. For example:
You can find the documentation for SASS here: SASS
Now lets talk about LESS.. This stands for Leaner Styling Sheets and made its first appearance in 2009. This is a dynamic preprocessor like SASS that can be compiled into CSS. LESS was designed by Alexis Sellier, although it was heavily inspired by SASS, it was designed to be as close to CSS as possible. While there are some similarities between LESS and SASS such as allowing nesting and variables, LESS is a JavaScript library and is processed on the client-side as to where SASS is processed on the server-side. Some other differences between the two are syntax. Below you can see that variables start with @ instead of $ (SASS)
You can find the LESS documentation here: LESS.
In conclusion… Both of these preprocessors were designed to dry up your code and make life for a developer a bit easier. It is only a matter of your preference and application on which you would like to use.
