Sass has two flavors of syntax: the older syntax that relies on indentation, and the newer syntax that uses curly braces as opposed to indentation. Another difference between the two syntactical styles is that the old-style does not require semicolons at the end of the lines, where as the new style does require them. The file extensions between these two styles also differ—the older style's file extension is .sass, and the current style's file extension is .scss.

Let's now look at a quick example of each one's CSS syntax. The first code block is the older style (.sass), and the second code block produces the same effect in the newer syntactical style (.scss). We'll be using the new style throughout the book.

The sample code given here is for writing .sass syntax:

$blue: #0000ff
$margin: 20px

.content-navigation
  border-color: $blue
  color: lighten($blue, 10%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

The sample code given here is for writing .scss syntax:

$blue: #0000ff;
$margin: 16px;

.content-navigation {
 border-color: $blue;
 color: lighten($blue, 10%);
}

.border {
 padding: $margin / 2; 
 margin: $margin / 2; 
 border-color: $blue;
}

The main difference between the two syntactical styles is that the older style aims to be terse, while the newer style aims to be more familiar to developers used to traditional CSS syntax.

In the preceding code blocks, you may have noticed $blue and $margin. These are not CSS items, but rather they are examples of variables. You've probably also noticed division operators. Variables and mathematical evaluation are just a couple of things that can be in your Sass code. We'll see these and more Sass features a bit later in the sections that follow.

Regardless of which syntax you use—old or new—the compiled result is the same. If you were to take either of the preceding code blocks and run them through an online compiler, such as Sass Meister (I'll mention this tool shortly as well), the resultant CSS will be the following:

.content-navigation {
  border-color: #0000ff;
  color: #3333ff;
}

.border {
  padding: 10px;
  margin: 10px;
  border-color: #0000ff;
}