Introduction

Sass (Syntactically Awesome StyleSheets) is a CSS preprocessor — you write in a language that looks a lot like CSS but has variables, nesting, and reusable logic, then a compiler turns it into plain CSS before it ever reaches a browser.

Why Sass exists

Plain CSS has no variables, no way to nest a selector inside another, and no way to define a reusable chunk of styles you can drop in wherever you need it — every color and spacing value gets typed out again and again, and changing a brand color means find-and-replacing it across a whole stylesheet. Sass was built specifically to fix that, and its ideas were popular enough that CSS itself eventually grew native variables — but Sass still does far more than that one feature covers.

Two syntaxes: .scss and .sass

Sass actually supports two different syntaxes. SCSS (.scss files) is the one almost everyone uses today — it's a superset of CSS, so curly braces and semicolons look exactly like the CSS you already know. The older, indentation-based Sass syntax (.sass files) drops the braces and semicolons entirely, relying on whitespace instead:

.button {
  padding: 8px 16px;
  border-radius: 4px;
}

.button
  padding: 8px 16px
  border-radius: 4px

Both compile to identical CSS. This course uses SCSS throughout, since it's what you'll see in the overwhelming majority of real projects, tutorials, and codebases using Sass today.

Compiling Sass to CSS

A browser has never heard of .scss — it only understands plain CSS. The sass command-line tool compiles one into the other:

sass styles.scss styles.css

.title {
  color: #1b6ec2;
  font-weight: bold;
}

.title {
  color: #1b6ec2;
  font-weight: bold;
}

For a plain rule like this one, the output looks nearly identical to the input — the real value of Sass shows up once variables, nesting, and mixins enter the picture, starting with the next lesson. Adding --watch after the command (sass --watch styles.scss styles.css) recompiles automatically every time you save the file, which is how most people actually work with it day to day.