SASS

Learn Sass In 20 Minutes | Sass Crash Course#

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

Variables#

  • 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#

  • 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#

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

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

Mixins#

  • 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#

  • 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
}

Calculations#

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

Edit this page