There are two main flavors of Sass file extensions used in web applications today: .sass and .scss. While these formats have a different language syntax, they both have identical features and capabilities, so the choice largely comes down to the developer's personal preferences.

.sass files are a whitespace-sensitive version of Sass that omits the usual parenthetical nesting common to CSS. It is favored largely by developers familiar with whitespace-sensitive languages and tends to have a very clean, highly readable appearance:

@import reset
$font-stack:    Helvetica, sans-serif
$primary-color: #333

=text-style($color: $primary-color)
  font-family: $font-stack
  color: $color

.btn-blue
  +text-color(#0000B2)

section
  margin: 0
  padding: 0

  a
    +text-style

.scss files are simply Sass-extended CSS files that look functionally identical to CSS, except for the special Sass feature keywords and conventions that are layered on top of the language. It is the most common choice by developers because it allows CSS to be included directly, without any sort of conversion to make the whitespace uniform or remove the parentheses:

@import "reset";
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

@mixin text-style($color: $primary-color) {
  font-family: $font-stack;
  color: $color;
}

.btn-blue {
  @include text-style(#0000B2);
}

section {
  margin: 0;
  padding: 0;

  a {
    @include text-style;
  }
}

By default, Angular-CLI has an internal dependency for sass-loader; a WebPack Sass loader that leverages the popular Sass compiler, Node-sass. Node-sass is a cross-platform implementation of Sass, which works in Windows, Mac OS, and Linux environments without requiring any other extra language frameworks, such as Ruby.

Angular-CLI supports both .scss and .sass formats. One of the main reasons to use the .scss Sass format is that many more developers are already familiar with working with vanilla CSS than with Sass. We can simply include any legacy or third-party CSS into a .scss file and it will continue working as vanilla CSS. For this reason, in all our examples moving forward in this book, we will focus on using the .scss Sass file extension.