1. Home
  2. Web Development
  3. CSS
  4. Sass Training

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
  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. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. Extend'ing Sass
    1. Extend
    2. How @extend Works
    3. Placeholders
    4. Extending: Good or Bad?
    5. Exercise: Using @extend in the Sass Blog
  10. 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
  11. 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.
Follow-on Courses

Training for your Team

Length: 3 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Pricing

Training for Yourself

$1,635.00 or 3 vouchers

Upcoming Live Online Classes

    • See More Classes

Please select a class.
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

SQL language made simple to understand and create.
Ryan Kwong
California Resources Corporation
The material covered was very useful. The exercises and the accompanying printed material were clear and concise. The best part, though, was our instructor. He was knowledgeable, sensitive to our needs and various skill levels, charismatic, and explained things well. He even took the time to examine some code we had written previously, and provide some programming suggestions on a project our department is currently working on. Excellent.
Emily Sharp
Sarah Lawrence College
This is the first computer class that I actually enjoyed attending. The instructor was patient and made the class fun and enjoyable.
Jenny Weber
Friendship Village
I wasn't sure what to expect since I've never taken any online courses for this type of design software. I was pleasantly surprised with the amount of work we covered in 3 days and the ease of communicating with the instructor. I was concerned that it would be difficult to learn online but I was pleased with the entire process.
Jennifer Salvador
Nevada Federal Credit Union
More Testimonials

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

62,326

Students who have taken Instructor-led Training

11,815

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

10.00

Students rated our Sass Training trainers 10.00 out of 10 based on 2 reviews

Contact Us or call 1-877-932-8228