Overview
In this 2-day Sass Training class, students will learn how to get started using Sass (Syntactically Awesome Style Sheets). Sass is a growing CSS extension language that is compatible with all versions of CSS. This course starts with a introduction of Sass along with a HTML and CSS background review. We then dive right into getting students started using Sass.
Audience
For students wanting to learn a more advanced way of using CSS with a website
Prerequisites
CSS experience is helpful but not required for this course.
Course duration
2 Days
Course outline
1. Introduction/Why Sass?
- The Problem Sass Solves
- Benefits of Sass
- Code Organization
- Performance
- Valid CSS
- Libraries
- Sass Syntax
- How to Use Sass
- Coming Attractions
- Organizing Sass
- Nesting
- Variables
2. Organizing and Including Sass Code
- Sass Partials
- Partials/@import Example
- Sass Watch
- Exercise 1: Using Partials
- Code Organization
- The Sass Blog
- The Sass Blog: With Sass Partials
- Directory Structure & Master Sass File
- The general Partial
- The header Partial
- The maincontent Partial
- The mainnav Partial
- The footer Partial
- The forms Partial
- Up Next
- Exercise 2: Extending the Sass Blog
- More Styling for the Blog: Syntax Highlighting
- Exercise 3: Adding Syntax Coloring
3. Nesting
- Nesting
- Referencing the Parent Selector with &
- Nested Properties
- Nesting Example
- Exercise 4: Using Nesting
- Nesting and Media Queries
- How Much to Nest
- Exercise 5: Using Nesting with the Sass Blog
- Nested @import
4. Sass Variables
- Variables
- Variable Naming Guidelines
- Variable Scope
- Shadowing
- Overwriting Global Variables within Blocks
- Exercise 6: Using Variables in Sass
- When to Use Variables
- Exercise 7: More Variables
- Exercise 8: Adding Variables to the Blog
- Advanced Sass
- Operations and Control Directives
- Functions
- Mixins
- Debugging
