Sass Training

In this 3-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 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.

Goals

Learn to learn what Sass is and why to use it.
Learn to learn to work with preprocessors.
Learn to learn to install and configure Sass on either a PC or a Mac.
Learn to learn the Sass philosophy on code organization.
Learn to learn how comments work in Sass.
Learn to learn how to work with operations, control directives, and expressions.
Learn to learn about mixins, such as bourbon, and learn how to write your own.
Learn to understand when and how to use nesting.
Learn to learn how to write your own functions.
Learn to learn about extending and framework options.

Outline

Introduction/Why Sass?
1. Sass: Syntactically Awesome Style Sheets
  1. How Sass Works
  2. Benefits of Sass
2. Sass Syntax
3. A First Sass Example
4. Coming Attractions
  1. HTML/CSS Background Review
  2. Installing and Configuring Sass
  3. Organizing Sass
  4. Variables
  5. Operations
  6. Functions
  7. Nesting
  8. Mixins
  9. Extending and Inheritance
  10. Frameworks
  11. Debugging and Best Practices
5. Exercise: Trying out Sass-to-CSS Compiling
Installing and Configuring Sass
1. Installing Sass from the Command Line
2. Exercise: Installing Ruby (Windows Users Only)
  1. Installing Sass
3. Exercise: Installing Sass
4. Using Sass
5. Setting a Watch
6. Output Styles
7. Exercise: Setting a Watch
8. Sass Applications
Organizing and Including Sass Code
1. Sass Partials
2. Partials/@import Example
3. Code Organization
4. The Sass Blog
  1. Directory Structure and Main 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
5. Exercise: Extending the Sass Blog
6. Nested @import
7. More Styling for the Blog: Syntax Highlighting
8. Exercise: Adding Syntax Coloring
Sass Variables
1. Variables
2. Variable Syntax, Scope and Data Types
  1. Variable Scope
  2. Data Types
3. Exercise: Using Variables in Sass
4. Exercise: Using Variables in the Sass Blog
5. Sass Variables and Media Queries
6. Exercise: Making the Sass Blog Responsive
Operations in Sass
1. Operations
  1. Division
  2. Subtraction, Negative Numbers, and the - Operator
  3. Colors
2. Exercise: Using Sass Operations
3. Control Directives
  1. @if
  2. @for
4. Exercise: Using @if and @for
5. Exercise: Adding Columns to the Sass Blog
Functions in Sass
1. Functions
2. Color Functions
  1. RGB Functions
  2. HSL Functions
  3. Opacity Functions
3. Other Color Functions
4. Color Function Examples
5. Exercise: Using Sass's darken and lighten Functions
6. String Functions
7. String Function Examples
8. Number Functions
9. Number Function Examples
10. Exercise: Using Sass's random Function
11. List and Map Functions
  1. List Functions
  2. Map Functions
12. List and Map Function Examples
13. Other Built-in Sass Function
  1. Selector Functions
  2. Introspection Functions
  3. Miscellaneous Functions
14. Writing Your Own Sass Functions
15. Exercise: Writing Custom Functions
16. Exercise: Using Functions in the Sass Blog: Adding Footer Icons
Nesting
1. Nesting
2. Referencing the Parent Selector with and
3. Nested Properties
4. Nesting Example
5. Exercise: Using Nesting
6. Nesting: Good or Bad?
7. Exercise: Using Nesting with the Sass Blog
Mixins
1. Mixins
2. A Mixin Example
3. Exercise: Writing Mixins
4. Mixin Arguments
  1. Default Values for Mixin Arguments
  2. Keyword Arguments
  3. Variable Arguments
5. Mixin Argument Examples
6. Mixin? Or Function?
7. Mixin Libraries
8. Exercise: Adding Mixins to the Sass Blog
Extend'ing Sass
1. Extend
2. How @extend Works
3. Placeholders
4. Extending: Good or Bad?
5. Exercise: Using @extend in the Sass Blog
Sass and Frameworks
1. Sass and Frameworks
2. Bootstrap
  1. How Bootstrap Works
3. A Simple Bootstrap Example
4. Bootstrap and Sass
5. Installing Bootstrap with Bower and Grunt
6. Exercise: Setting up Bootstrap with Sass
7. Exercise: Rendering the Sass Blog with Bootstrap
Debugging and Best Practices
1. Sass Debugging
2. Debugging Directives: @error, @warn, @debug
  1. @error
  2. @warn
  3. @debug
3. Debugging Examples
4. Best Practices
  1. Use a Preprocessor!
  2. Organize Your Code
  3. Modularize
  4. @function or @mixin?
  5. @mixin or @extend?
  6. Avoid Deep Nesting
  7. Output Style

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

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

CSS experience is helpful but not required for this course.

Preparing for Class

Onsite: Course Setup
Live Online: Course Setup | WebEx Setup

Follow-on Courses

Sass Training

Training for your Team

Training for Yourself

Upcoming Classes

What people say about our training