sass, scss

  • Sass, also known as the indented syntax
  • SCSS, a CSS-like syntax

Initially, Sass was part of another preprocessor called Haml, designed and written by Ruby developers.

// 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)

// 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);
}

Pros for Sass Indented Syntax

  • No need for @mixin or @include, when a single character is enough: = and +.
  • the Sass syntax enforces clean coding standards by relying on indentation.

Pros for SCSS Syntax

  • you can rename a CSS file in .scss and it will just work, but sass can’t.
  • easier to read
  • ittle to no learning curve.

Reference from