Chapter 2. Basic Sass syntax

 

This chapter covers

  • Reusing colors, lengths, and other values with variables
  • Adding structure to your CSS by nesting rules
  • Writing maintainable stylesheets by distributing them among multiple files
  • Reusing entire styles with mixins and inheritance

Sass’s SCSS syntax is a superset of the syntax of CSS3. This means that if can read and write CSS, you already know the basics of how to read and write Sass.

On top of CSS, Sass adds new features and new syntax that let you express more styles more clearly with less writing. Some Sass additions are designed to be easy to understand for people who understand CSS, even without having seen Sass before. Most of them require some explanation, though, which is what this chapter is for.

When reading a Sass file for the first time, you begin by just looking at the part you’re familiar with: the CSS. The fundamental purpose of any Sass file is to style a website, just like CSS, so the style being defined is still the most important part of the file.

After you understand the styles, you look at the Sass features being used. If there are any you don’t recognize, you can look them up in this book. Then, for the ones you do, you ask yourself, how might these be helping to express the style?

2.1. Working with variables

2.2. Nesting CSS rules

2.3. Importing Sass files

2.4. Silent comments

2.5. Introducing mixins

2.6. Trimming CSS with selector inheritance

2.7. Summary

sitemap