Learn Sass In 20 Minutes | Sass Crash Course#

  • SASS uses .scss extension
  • Use Live Sass Compiler in VS Code to compile SASS easily


  • Variables help in keeping things consistent around the CSS
    • Store the site colors in one place so there's less duplication thus lower chance of fuck ups
  • Create a variable like $primaryBtn: red and this can be used anywhere in the scss file


  • Nesting is a powerful part of SASS
header {
button {
&:hover {}
p {}
  • Nesting keeps the code organized and in one place
  • To add after, hover kind of properties use the & symbol


  • Partials are a way to organize code in parts
  • Sass supports partials and lets you import these in one main file
  • e.g.

And can be imported in the main file as such @import "./header";


  • Mixins are like functions which can be defined once and reused everywhere
@mixin varName($parameter) {
display: flex;
justify-content: $parameter
header {
@include varName(center);
button {
@include varName(left);


  • Inheritance helps with reusability of the already defined styles
@import "./header";
.contact {
@extend header;
//This has now all styles of header
//Defining further styles will overwrite the styles of header


Sass supports basic calculations, addition, subtraction, division etc. width: 100% - 20%