Duration
2 days (10:00 AM - 5:00 PM Eastern)
Cost
$650.00

Online Training

Do you want to take an online, instructor-led class?

Onsite Training

Do you have five (5) or more people needing this class and want us to deliver it at your location?

Details

Subjects Covered

Prerequisites

Setup Requirements

Details

Course Details

Sass (Syntactically Awesome Style Sheets) is a growing CSS extension language that is compatible with all versions of CSS. This course starts with an HTML and CSS background review, and then it dives into Sass. You learn Sass syntax as well as how to organize and include Sass code, nesting, and how to use Sass variables.

Subjects Covered

Sass

  • 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
  • Organizing and Including Sass Code
    • Sass Partials
    • Partials/@import Example
    • Sass Watch
    • 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
    • More Styling for the Blog: Syntax Highlighting
  • Nesting
    • Nesting
    • References the Parent Selector with &
    • Nested Properties
    • Nesting Example
    • Nesting and Media Queries
    • How Much to Nest
    • Nested @import
  • Sass Variables
    • Variables
    • Variable Naming Guidelines
    • Variable Scope
      • Shadowing
      • Overwriting Global Variables within Blocks
    • When to Use Variables
    • Advances Sass
      • Operations and Control Directives
      • Functions
      • Mixins
    • Debugging

Prerequisites

Before Taking this Class

CSS experience is helpful but not required for this course.

Setup Requirements

Software/Setup For this Class

Sass