Sass - Syntax

Sass - Syntax (SCSS vs. Indented)

Sass offers two distinct syntaxes for writing your stylesheets. Understanding both is helpful, although one is far more common in modern development.

SCSS (Sassy CSS) - The Primary Syntax

SCSS uses the .scss file extension and is the most widely adopted syntax. Its key characteristic is that it’s a superset of CSS. This means any valid CSS stylesheet is also a valid SCSS stylesheet. This makes adoption easy, as you can gradually introduce Sass features into existing CSS files.

Key features of SCSS syntax:

• Uses curly braces {} to define style blocks.
• Uses semicolons ; to separate property declarations.
• Whitespace is flexible (like CSS), though consistent indentation is crucial for readability.
• Supports all standard CSS syntax, including comments (/* ... */).
• Also supports single-line comments (// ...) which are removed during compilation.

Example SCSS:

$primary-color: #3498db;
$padding: 15px;

.button {
  padding: $padding;
  background-color: $primary-color;
  border: none;
  border-radius: 5px;
  color: white; // Single-line comment

  &:hover {
    background-color: darken($primary-color, 10%);
  }

  /* Multi-line comment */
  &--large {
    padding: $padding * 1.5;
    font-size: 1.2em;
  }
}

Due to its similarity to CSS and broader community support, SCSS is the recommended syntax for new projects.

Indented Syntax (Original Sass)

The Indented Syntax, often referred to simply as “Sass,” uses the .sass file extension. This was the original syntax created for Sass.

Key features of Indented Syntax:

• Uses indentation (typically two spaces or a tab) to define nesting and style blocks instead of braces.
• Uses newlines to separate property declarations instead of semicolons.
• Property declarations can optionally start with a colon (e.g., :color red), but the standard property: value format is more common now.
• Mixins and includes often use shorthand (= for @mixin, + for @include).

Example Indented Syntax (.sass):

$primary-color: #3498db
$padding: 15px

.button
  padding: $padding
  background-color: $primary-color
  border: none
  border-radius: 5px
  color: white // Single-line comment

  &:hover
    background-color: darken($primary-color, 10%)

  /* Multi-line comment */
  &--large
    padding: $padding * 1.5
    font-size: 1.2em

While perfectly functional, the indented syntax is less common today. Its strict reliance on indentation can sometimes be perceived as more fragile, and many developers prefer the explicit block demarcation provided by SCSS’s braces.

Choosing a Syntax

For most projects and teams, SCSS (.scss) is the recommended choice due to its CSS compatibility, wider adoption, and arguably clearer block structure.

You might encounter the indented syntax (.sass) in older projects or if preferred by a specific team. Tools can often convert between the two syntaxes if needed (e.g., using the sass-convert command-line tool that came with older Ruby Sass, or potentially other community tools).