Sass Basics

Summary

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

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

Learn why you should use Sass.

Learn about the different versions of Sass.

Learn how to install Homebrew on macOS.

Learn how to install Chocolatey on Windows.

Learn how to install Sass.

Learn how to run Sass.

Learn how to use Sass in a web project.

// Single line comment example

/* Multi-line
   comment
   example */

$main-color: red;

p {
  color: $main-color;
}

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

p {
  @extend %custom-colors;
}

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

  p {
    color: blue;
  }
}

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

@use 'name';

Learn more about source maps.

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

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

Learn how to import a partial.

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