Sass and Compass in Action

Appendix C. The Sass syntaxes

C.1. Indented Sass versus SCSS

Most of this book demonstrates the SCSS syntax, which stands for Sassy CSS. SCSS is a superset of CSS, meaning that any valid CSS file is also a valid SCSS file. This means that you can change the CSS file screen.css to screen.scss and begin adding Sass features without needing to make any other changes. As a result, though the SCSS syntax is newer, it has become the most popular syntax for Sass.

Originally, Sass only had one syntax, called the indented syntax, or at that time, just Sass. To illustrate the differences between these syntaxes, we’ll look at the same code example written in each syntax.

First we’ll look at the SCSS syntax.

Listing C.1. SCSS syntax example

/* Compass ...