Introducing SASS
- Defining CSS Preprocessors
- Why use Preprocessors?
- What is SASS?
- SCSS or Sass?
Setting up SASS
- Environment Setup
- Folder Structure
- File Structure
- Initializing our Project Directory
- Install node-sass
- Compiling Sass Code to CSS
- Live Reload
Variables
Nesting
Mixins
Functions
Partials and Importing
- Using Partials
- @import in CSS vs SASS
Inheritance
The Ampersand Operator
Control Directives
- @if and @else
- @for
- @while
Interpolation
- The Syntax
- Why Use Interpolation?
Placeholders
- Why use Placeholders?
Structuring your SASS Projects
- How do we structure our Sass projects?
- Simple Structure
- The 7–1 Pattern
- Get up and running with 7–1:
Setup Media Queries with SASS Mixins
- CSS Media Queries
- Mixins
- Setting up your mixins
- Using a mixin
- Another way to setup our mixins
Setting up the Perfect Build Process
- What is a build process?
- The build process
- Creating the Build Process
- Summing up