# Introduction to Sass

# What is Sass?

Sass, short for Syntactically Awesome Style Sheets, is essentially CSS with superpowers. Think of it as an extension of CSS that allows you to write cleaner and more efficient code by making use of features not available in plain CSS.

Sass files have .scss extensions and must be compiled into .css for browsers to understand.

# Some advantages of Sass

CSS is an essential styling language understood by all browsers but has certain limitations addressed by Sass:

Advantages	Description
Variables	Reuse values (colors, font-sizes, etc.) across your styles.
Nesting	Nest CSS selectors to keep code organized and readable.
Mixins	Write reusable chunks of CSS code.
Partials	Organise your code in seperate files.
Bootstrap Sass	Easily customize Bootstrap (opens new window) by overriding its Sass variables.

WARNING

We will delve deeper into Bootstrap Sass customization later in this course. First, we'll learn how to use Sass seperately.

# Compile Sass via Command Line

First, you need to install Sass globally on your system. You can use the Node Package Manager (npm) for this.
```
npm install -g sass
```
1
Now you can compile your Sass file to CSS by running:
```
sass path/to/input.scss path/to/output.css
```
1

REMEMBER

Don't forget to change the path to input and output to the actual filepaths.

TIP

Enable Sass's auto-update feature by using the --watch command. This makes Sass continuously monitor your .scss file for any changes. When a change is detected, Sass automatically compiles the updated .scss to .css, ensuring your output file is always up-to-date. Here's how to set it up:

sass --watch path/to/input.scss path/to/output.css