Sass Basics

Summary

Below you will find a collection of tutorials teaching the basics of Sass, the CSS extension language and preprocessor.

Before You Start

These tutorials assume you have a basic understanding of the terminal and CSS.

Exercises

You can download exercises to go along with these tutorials on our Sass exercises repository on GitHub. You don’t have to know how to use GitHub to use them. Just click the green Code button in the corner and click the Download ZIP option. Then unzip the folder and open it in your text editor.

Tutorials

Introduction

Why should I use Sass?

Learn why you should use Sass.

The history of Sass

Learn about the different versions of Sass.

Setup

Install Sass

Learn how to install Sass.

How to run Sass

Learn how to run Sass.

How to use Sass in a web project

Learn how to use Sass in a web project.

Sass Features

Comments

// Single line comment example

/* Multi-line
   comment
   example */

Variables

$main-color: red;

p {
  color: $main-color;
}

Extend

%custom-colors {
  background-color: green;
  color: yellow;
}

p {
  @extend %custom-colors;
}

Nesting

#my-section {
  h1 {
    color: red;
  }

  p {
    color: blue;
  }
}

Partials and modules

If you have a file named _name.scss, you can import it like this:

@use 'name';

Source maps

Learn more about source maps.

Extra

Minify CSS output using Sass

To minify the CSS output generated by Sass, add the --style=compressed option to your command in the terminal.

Using Sass with Git

When using Sass with Git, you should add your CSS file(s) or folder(s) to your .gitignore file.

Install Homebrew on macOS

Learn how to install Homebrew on macOS.

Install Chocolatey on Windows

Learn how to install Chocolatey on Windows.

Deprecated

Partials and imports

Learn how to import a partial.

Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.