Continuing with the concept of generating CSS and permitting features like variables, Sass and LESS were developed. Both of these technologies are very similar to each other and server-side generated CSS.
The article will look, albeit very briefly, at how Sass can be used to create CSS that has more than just the normal features. This article is not a guide to Sass, simply an introduction to how it works.
Introduction
It is very important to note that Sass is never actually run on the local machine, similar to server-side generated CSS. This is why it is known as a preprocessor. LESS on the other hand is a JavaScript based system and is, generally, client-side (although with certain configurations there are server-side options, such as with Node.js). In order for both Sass and LESS to function, they are complied to CSS.
Both of these languages differ in the way they operate, but essentially, these languages give the exact same results.
Sass
Sass (Syntactically Awesome Style Sheets) is precompiled to CSS and requires the Sass compiler.
It is important to know that there exist two different Sass syntaxes, SCSS and Sass. This article will focus on the more CSS-like SCSS.
An example of SCSS syntax is demonstrated below:
$fonts: Calibri, Segoe UI, Arial; $fontsize: 14px; body { font-family: $fonts; font-size: $fontsize; }
This looks like a mix of both CSS and PHP at first glance due to the variable assignments. Variables are the words beginning with the $ sign (just
as with PHP). Here the example specifies the fonts to be used on the page in the $fonts variable at the top. This can then
be reused over and over again.
To install the Sass compiler on a Unix-like machine (Mac OS X and Linux), the following command can be used:
sudo gem install sass
Once the code is ready to convert from Sass to CSS, the following command line converts it:
sass input.sass output.css
