Lesson Weekend

So far we've written our Sass to include curly brackets after selectors and semi-colons after style declarations. This is similar to traditional CSS, despite the fancy new features Sass supports. However, you should know this isn't the only way we can write Sass...

...You see, there's something we haven't told you...Those brackets and semicolons? They're not actually required. They're just the more widely-used (and beginner friendly) syntax out of two syntaxes Sass supports.

Sass Syntax Varieties

Each of these two supported syntaxes has their own filetype; there's the .scss flavor we've been using, and a second variety written in a .sass file. As explained in the article Difference Between Sass and SCSS:

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “.sass”)...it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.

Syntax Comparison

Check out the following graphic:

sass vs scss vs css comparison

  • The center depicts the .scss syntax we've been using.

  • The right depicts the CSS this Sass will be compiled into in our output file.

  • The left side is the special syntax used in.sass files. Despite the lack of brackets and semicolons, it will also compile into the CSS output on the right side!

As you can see, the .sass syntax does not include semicolons and curly brackets. Some front end developers will claim it's easier to type, whereas others will claim the lack of brackets makes it more difficult for them to see what is nested within what. Different developers and companies have their own stylistic preferences and opinions.

More Examples

You can see examples of .sass syntax in a variety of use cases in the Sass Documentation. There are two tabs at the upper-right of each code snippet reading Sass and SCSS. You can click the Sass tab to see what each snippet looks like in .sass syntax.

Optional Reading: Sass vs SCSS: Which Syntax is Better?

If you're interested in reading more about this different syntax, and the differences between the two varieties, check out the in-depth comparison Sass vs SCSS: Which Syntax is Better? by John W. Long.

Conclusion

The .scss syntax we've been using is more common in the industry, so you should definitely feel comfortable writing in it. Just make sure you can at least recognize .sass syntax if/when you encounter it in the wild. You're also welcome to optionally begin using it in your own projects, if you desire.

Lesson 11 of 36
Last updated more than 3 months ago.