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.