Sassy CSS, SASS, and LESS

Variables, calculations, and all sorts of fun tricks are some of the benefits made available when using SASS/SCSS.

Generally, when people talk about SASS, they'll be referring to the preprocessor and the language as a whole. The SASS preprocessor allows two syntaxes: SASS, an indented syntax, and SCSS, a CSS-like syntax.

SASS actually comes from another preprocessor, called HAML, that was designed and written by Ruby developers. Because of this, the SASS syntax is based on specific indentation and does not make use of semicolons. Take a look at this sample code to get better understanding of it. We'll compare CSS, SCSS, and SASS syntax in three examples.

CSS

Here is a piece of code that uses CSS:

.title-container {
    border-radius: 1.2em;
   -webkit-border-radius: 1.2em;
   -moz-border-radius: 1.2em;
    color: red;
    width: 100%;
    overflow: hidden;
}
.subtitle-container {
    border-radius: 1.5em;
   -webkit-border-radius: 1.5em;
   -moz-border-radius: 1.5em...