The Next Step with Sass and Compass

 69 Reviews Add a review

Published April 2014

Take your Sass skills to the next level.

The Next Step with Sass and Compass is an intermediate level course in Sass for people who already know the basics of Sass. It is a follow up course to Step by Step Sass, but can be completed by anyone who understands the basic Sass concepts of variables, mixins, nesting, extend and parent selectors.

In this class we will get deeper into Sass and learn how powerful it can be by using Math, Lists, and Control Directives, like @for, @each or @if and @else. All of these things let you actually write your CSS more like a programming language, which can make your code easier to maintain.

This course uses a real project. In it we create a CSS only animated slideshow and make it completely modifiable using Sass. We explore the Compass framework and its many useful tools and mixins. We learn how simple it is to create and maintain CSS Sprites with Compass, and we will explore the many color functions that you get with both Sass and Compass.

The course also covers how media queries work in Sass and how @content can help developing responsive websites much easier.

What you'll learn

Learn how to use more powerful Sass concepts in real website. Understand how the programming concepts in Sass can be useful in making complex code much easier to maintain.

When you are done with this course you will understand

  • Tools to help working with Sass eaiser
  • Sass Math
  • Lists and how they can be useful
  • Control Directives to code your CSS like a programmer
  • How to create customizable mixins that work in all browsers, like our animation mixin
  • The Compass framework
  • Sass and Compass Color function
  • Creating a CSS Sprite with Compass
  • Media Queries and Sass for building responsive website
  • Closed captions available
Meet your instructor
Lisa Catalano

I'm a web developer, designer, teacher and student. Keeping up to speed on technology is a challenge these days, and I like to try to focus in on what is most important and useful.

Lesson 1: Introduction
Free Introduction 2:31
Lesson 2: Project Setup and Tools
Download the Project Code
Class Project 2:32
Free Sass Watch Options 4:46
Using the Prepros App 5:55
Lesson 3: Sass Math
Sass Math 3:40
Calculating Background Position 6:48
Transitions 4:26
Lesson 4: Sass Lists
Sass Lists 7:05
Background Images 3:42
Padding 3:20
Category List 9:30
Lesson 5: CSS Animations
CSS Animations - HTML Set Up 5:48
CSS Animations 5:50
Refactor Animation with Sass 6:39
Reusable Animation Code 5:53
Vendor Prefixes 5:00
Cleanup 6:43
Lesson 6: Compass
Free Using Compass 7:19
Compass and CSS3 6:47
Compass Typography 4:47
Compass Sprites 6:21
Modifying a Sprite 3:38
Color Functions 5:59
Image Helpers 3:45
Lesson 7: Sass and Media Queries
Responsive Websites 3:00
Sass and Media Queries 6:35
Mixins with @content 7:53
Lesson 8: Conclusion
Conclusion 1:16

Leave a Review