Complete SASS Guide in Examples
Published in
3 min readSep 12, 2020
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:
- Comments
- Nesting
- Variables
- Import and use
- Mixins and Include
- Extend
- Functions and if/else
- Loops
- Media Queries
Link to GitHub repository:
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.