Sass Training

Customized Onsite Training

3
Days
  • Customized Content
  • For Groups of 5+
  • Online or On-location
  • Expert Instructors

Live Online Training

$1,185.00
or 3 vouchers
  • Live Online Training
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

Upcoming Classes

  • See More Classes

Please select a class.
Overview

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
  1. Learn to learn what Sass is and why to use it.
  2. Learn to learn to work with preprocessors.
  3. Learn to learn to install and configure Sass on either a PC or a Mac.
  4. Learn to learn the Sass philosophy on code organization.
  5. Learn to learn how comments work in Sass.
  6. Learn to learn how to work with operations, control directives, and expressions.
  7. Learn to learn about mixins, such as bourbon, and learn how to write your own.
  8. Learn to understand when and how to use nesting.
  9. Learn to learn how to write your own functions.
  10. Learn to learn about extending and framework options.
Outline
  1. 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
  2. HTML/CSS Background Review
    1. HTML/CSS Review
    2. Semantic HTML
    3. HTML5
      1. HTML5 Form Controls
      2. HTML5 DOCTYPE and Character Encoding
    4. Exercise: Blog Pages
    5. CSS
    6. CSS3 Browser Compatibility
    7. New CSS3 Features
    8. Exercise: Styling the Blog Pages
  3. 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
  4. Grunt
    1. Grunt
    2. Installing Node
    3. Configuring Grunt
    4. Setting up a Project
    5. Why Grunt?
    6. Exercise: Setting up a Grunt Project
    7. Other Tasks with Grunt
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. Extend'ing Sass
    1. Extend
    2. How @extend Works
    3. Placeholders
    4. Extending: Good or Bad?
    5. Exercise: Using @extend in the Sass Blog
  12. 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
  13. 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 s helpful but not required for this course.
Preparing for Class
Follow-on Courses

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

74,642

Students who have taken Live Online Training

15,220

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.41

Students rated our trainers 9.41 out of 10 based on 5,191 reviews

Contact Us or call 1-877-932-8228