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 ...

Get Sass and Compass in Action now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.