Build an Animated Slideshow with Sass and Compass

4.6 Average Customer Rating

Take your Sass skills to the next level.

  • Published Date April 2014
  • 29 Videos
  • 2 hours 27 minutes
  • 2154 Happy Students

About the course

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.

For more on Sass, check out AtoZ: Sass. It’s a great course to discover quick Sass lessons, tips, and references.

  • Published Date April 2014
  • 29 Videos
  • 2 hours 27 minutes
  • 2154 Happy Students

Courses Outline

Lesson 1: Introduction
Introduction
2:31
Lesson 2: Project Setup and Tools
Download the Project Code
Class Project
2:32
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
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
  • Published Date April 2014
  • 29 Videos
  • 2 hours 27 minutes
  • 2154 Happy Students