Before we talk about SASS LESS, I want to say, Gone are the days when CSS used to be a supporting branch for HTML. Today, CSS is a giant in itself and with CSS3 things have only gotten uphill for design perfectionists.
However, CSS has always been very static and it has made people rewrite stuff they had already written. In websites that are more sophisticated from a design perspective, following the old school approach doesn’t seem to be a good idea.
This is where SASS (Syntactically awesome style sheets) and LESS come to the rescue.
SASS and LESS are modern languages built specifically for handling style sheets. These languages are not interpreted, they can literally be compiled to create a style sheet and hence automate most of your boring copy paste work.
SASS
Click here for official page.
Initially launched on November 28, 2006, SASS has become the de facto choice for developers working heavily on the front end. SASS allows variables, mixins, nesting and supports inheriting attributes based on CSS selectors.
SASS basically works with 2 types of syntax. The older one had files with .sass extension and it featured code that was written with indentations and newline characters. The code structure was clean, very much like python. An example of the SASS code syntax is as follows.
$color: #ff0043
$accent: #000080
.footer
border-color: $accent
color: darken($color, 10%)
With the older syntax, CSS files could not be used directly as sass code, But the newer syntax looks very much like CSS and it has a file extension of .scss. It is actually a superset of the good old standard CSS we all know. This means that every CSS file is actually a completely valid scss file. An example of the scss syntax is below,
$color: #ff0043;
$accent: #000080;
.footer{
border-color: $accent;
color: darken($color, 10%);
}
Both versions of SASS syntax on compiling output a regular .css file with the following CSS code.
.footer {
border-color: #000080;
color: #cc0036;
}
LESS
Click here for official page.
LESS was another attempt at extending CSS with a programming language like features and it was inspired by the work done on SASS. LESS has a code syntax and structure very much like the default css and this is the reason that a valid CSS file is a valid less file. Less files have an extension of .less and they have a syntax similar to the example below.
@royal-blue: #1900ff;div {
color: @royal-blue;
}
The above less code on compiling give us the following css code.
div {
color: #1900ff;
}
You can see that less uses @ for declaring variables instead of $ i.e used by SASS. Apart from simple variables, LESS allows for operators, mixins, nesting and even functions. The best feature of LESS is that it has a real-time compiler support.
Conclusion
With the ever explaining need for better and more sophisticated designs, the need for style sheets has grown but by default, style sheets are not capable of handling modern day requirements. Both allow for significant flexibility, consistency and logical approach to writing style sheets. I have barely touched the iceberg of modern-day CSS and I suggest if you are a front-end developer, you should definitely look into both of these technologies.
