Sass Reference
Article

SCSS

By Hugo Giraudel

When talking about Sass, we usually refer to the preprocessor and the language as a whole. Say, for example, “Sass project”, or “a Sass mixin”. Meanwhile, Sass (the preprocessor) allows two different syntaxes:

  • Sass (Syntactically Awesome StyleSheets), also known as the indented syntax;
  • SCSS (Sassy CSS), a CSS-like syntax.

Note that Sass is never in uppercase, no matter whether we’re talking about the language or the syntax. Meanwhile, SCSS is always in uppercase. Use SassnotSASS.com as a reminder.

Initially, Sass was part of another preprocessor (that still exists) called Haml, heavily inspired by Ruby. Because of that, Sass stylesheets were using a Ruby-like syntax with no braces, no semi-colons and a strict indentation, like this:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

This syntax has evolved a bit since then, and now both Sass and SCSS use the $ for variable definition and the : for property/variable assignment, so the above outdated code should be written as:

// Variable
$primary-color: hotpink

// Mixin
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

.my-element
  color: $primary-color
  width: 100%
  overflow: hidden

.my-other-element
  +border-radius(5px)

The same code in SCSS would be written as follow:

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}

.my-other-element {
  @include border-radius(5px);
}

Which One?

The choice is really up to the author as both syntaxes are strictly equivalent in features; at this point, it is all about syntax preferences.

The Sass indented-syntax is shorter and lighter to type because almost all punctuation is gone, but it also is incompatible with default CSS syntax. Also, some features are a bit harder to read with this syntax, such as lists and maps as they have to be inlined and cannot live on several lines (yet):

$map: ('foo': 1, 'bar': 2, 'baz': 3)

Moreover it appears that SCSS is mostly the most used of both syntaxes in the Sass community as it is closer to CSS and does not enforce a difficult learning curve contrarily to the whitespace-sensitive syntax.

Engine compatibility

Both syntaxes are fully equivalent in all engines. Only the Ruby-like syntax currently does not allow to write some data structures on multiple lines.