Sass Training (SAS101)

In this 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 what Sass is along with a HTML and CSS background review. Then we dive right into getting students started using Sass.

CSS is not a prerequisite to this course. However, working with Sass is a more advanced way of using CSS with a website. Students looking to enhance their skills may want to consider our Introduction to CSS, Advanced CSS, or CSS3 for Web Developers courses after taking Sass.

1. Introduction/Why Sass?
   1. The Problem Sass Solves
      1. Benefits of Sass
      2. Code Organization
      3. Performance
      4. Valid CSS
      5. Libraries
   2. Sass Syntax
   3. How to Use Sass
   4. Coming Attractions
      1. Organizing Sass
      2. Nesting
      3. Variables
2. Organizing and Including Sass Code
   1. Sass Partials
   2. Partials/@import Example
   3. Sass Watch
   4. Exercise: Using Partials
   5. Code Organization
   6. The Sass Blog
   7. The Sass Blog: With Sass Partials
      1. Directory Structure & Master Sass File
      2. The general Partial
      3. The header Partial
      4. The maincontent Partial
      5. The mainnav Partial
      6. The footer Partial
      7. The forms Partial
      8. Up Next
   8. Exercise: Extending the Sass Blog
   9. More Styling for the Blog: Syntax Highlighting
   10. Exercise: Adding Syntax Coloring
3. Nesting
   1. Nesting
   2. Referencing the Parent Selector with &
   3. Nested Properties
   4. Nesting Example
   5. Exercise: Using Nesting
   6. Nesting and Media Queries
   7. How Much to Nest
   8. Exercise: Using Nesting with the Sass Blog
   9. Nested @import
4. Sass Variables
   1. Variables
   2. Variable Naming Guidelines
   3. Variable Scope
      1. Shadowing
      2. Overwriting Global Variables within Blocks
   4. Exercise: Using Variables in Sass
   5. When to Use Variables
   6. Exercise: More Variables
   7. Exercise: Adding Variables to the Blog
   8. Advanced Sass
      1. Operations and Control Directives
      2. Functions
      3. Mixins
      4. Debugging

Each student receives a comprehensive set of materials, including course notes and all class examples.

Experience in the following would be useful for this CSS class: