Tuesday, 1 May 2018

Difference between .sass, .scss and .css

When I first started down the path of CSS preprocessors I was overwhelmed by the different options (sass, less, stylus), the differences in the syntax, and most of all I had no idea how I was supposed to get started with this new approach to writing CSS.

There are a few options when it comes to the flavour of CSS that you can choose.
  • SASS with Compass
  • SCSS with Compass
  • LESS
  • Regular ol’ CSS
Don’t be confused by the SASS and SCSS options, although I was initially, .scss is Sassy CSS and is the next generation of .sass. An explanation from the website
Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.

Explanation of SASS vs SCSS on the website

If that didn’t make sense you can see the difference in code below.
/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
In the code above we use ; to separate the declarations. I’ve even added all the declarations for .border onto a single line to illustrate this point further.
In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;.
/* SASS */
$blue: #3bbfce
$margin: 16px

  border-color: $blue
  color: darken($blue, 9%)

  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue
You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.
/* CSS */

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.

No comments:

Post a Comment

LDAP / LDIF fields / attributes meaning

LDAP attributes to field names LDAP Attributes Field Names buildingname Building c Country cn Full Name co Country comment Comment commonnam...