Install a Sass compiler using a VS Code Extension.
Demonstrate common features of the Sass language:
variables with $
nested rules
nested selectors with &
mixins
functions
conditionals with @if/@else if/@else
inheritance with @extend
Terminology
Dependency
A software module/library/framework that your code needs to have installed before it can function. Sass is a dependency.
Build Tool/Process
Software that optimizes/prepares/packages your source files for deployment to a live server. Sass compilers and minifiers are dependencies.
CSS Preprocessor
A program that lets you generate CSS from the preprocessor’s own unique syntax. These programs provide added features that make the CSS structure more readable and easier to maintain.
Watching
When a preprocessor “watches” for changes to .scss files so it can compile them to .css immediately.
Sass is a dependency that requires a “build process” to compile .scss files into .css files before your site will work in a browser.
When adding your stylesheets to your HTML, you will link the compiled css. Sass files will not work in a browser.
@import has recently been deprecated (discontinued) in favour of @use and @forward. We will cover these today if we have time.
2. CSS and JS Minification
Learning Objectives
Define minification.
Install a Minifier using a VS Code Extension.
Terminology
Minification
A build process that reduces CSS and JS file size by removing comments and whitespace. Advanced compilers will also reduce JS variable/function names to a, b, c, etc.
