O'Reilly logo

Sass and Compass in Action by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required