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.

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 Homebrew on macOS

Learn how to install Homebrew on macOS.

Install Chocolatey on Windows

Learn how to install Chocolatey on Windows.

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.

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.