Complete SASS Guide in Examples

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

What will be covered in this article:

1. Comments
2. Nesting
3. Variables
4. Import and use
5. Mixins and Include
6. Extend
7. Functions and if/else
8. Loops
9. Media Queries

Link to GitHub repository:

nemrosim/sass-react-examples

1. Comments

The way Sass comments work differs substantially between SCSS and the indented syntax. Both syntaxes support two types of comments: comments defined using /* */ that are (usually) compiled to CSS, and comments defined using // that are not.