To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

CSS and Sass

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:

SCSS
$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:

Bash
sudo gem install sass
		

Once the code is ready to convert from Sass to CSS, the following command line converts it:

Bash
sass input.sass output.css
		
Provide feedback on this page
Comments are sent via email to me.