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
- 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.
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
#
Inheritance- Inheritance helps with reusability of the already defined styles
#
CalculationsSass supports basic calculations, addition, subtraction, division etc.
width: 100% - 20%