Nomenclature and Syntax

Some of the terms associated with CSS can be quite confusing, so we’ve added a short introduction to how we name things in the book. Also, there are two different syntaxes for writing Sass that need to be distinguished.

A Brief CSS Recap

We thought it would be useful to go through a couple of technical terms we’ll be using for different aspects of CSS markup. If you’re already familiar with selectors, declaration blocks, and the like, you can probably skip this part.

Let’s use a small bit of CSS as an example:

Here we have p, which we call the selector. What follows (the bit inside the curly braces) is the declaration block. The two lines—one defining the color and one defining the font size—are known as declarations. Each declaration has a property and a value. The property in this case is the color or the font size. The value is the color itself—for example, #336699, blue—or the size of the font—for example, 20px.

The use of classes and IDs allows us to define sets of declarations that will only be applied to specific sections of our HTML. Sass allows you to create much richer selectors, as we’ll see in Part 1, ​Basics​.

SCSS: A More CSS-like Way to Write Sass

SCSS, which stands for Sassy CSS, is one of the syntaxes we use to write Sass. The grand aim of SCSS is to keep the look of CSS while introducing the units of Sass. If you’re familiar with CSS, it’s pretty easy to read. We still use selectors, classes, and IDs. We open a curly brace to start the declaration block, and we separate out declarations with semicolons. What’s extra is the added functionality.

When we use the word Sass, we’ll mostly be referring to the SCSS syntax.

Original Sass: A Stripped-down Way to Write Sass

Before SCSS, there was Original Sass, which strips out some of the unnecessary elements of CSS and SCSS. Original Sass can be compiled just the same as SCSS, via the Sass engine.

A great example of unnecessary elements are curly braces. Look at this:

We know by the use of . or # that something is a selector. Using whitespace (two spaces or a soft tab that indents the properties) helps us. In the example above, the indentation lets us know that color and font-size refer only to the fab_text class. The curly braces aren’t needed. Why not just strip them out?

Look at that! Doesn’t the code already look a lot cleaner, a lot simpler?

While we’re at it, we might as well take away the semicolons at the end of the values. They don’t add much, do they?

And this is how Original Sass is written. As you can see, it’s more different from CSS than from SCSS, as it involves removing bits we’re used to. So in the examples we use in the book, we’ll mostly be using SCSS to describe things. Once you’re used to it, though, Original Sass should be more readable at a quick glance.

Aside from the curly braces and semicolons, most of the features we’ll look at are written the same in both SCSS and Original Sass. When they’re not, we’ll point out how they differ. It’s really up to you whether you use SCSS or Original Sass syntax.