The Next Step with Sass and Compass

Take your Sass skills to the next level. Learn how to use Math, Lists, Control Directives and Compass to code faster.
3.9 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
198 students enrolled
$15
$25
40% off
Take This Course
  • Lectures 57
  • Length 4.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2014 English

Course Description

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.

When you are done with this course you will understand how powerful Sass is and how you can use it to get your work done faster.

What are the requirements?

  • Understanding how to using Sass variables, mixins, extend, nesting and parent selectors

What am I going to get from this course?

  • Explore tools to make Sass development easier
  • Understanding Sass Math
  • Learn the power of Sass Lists and how to use them
  • See how to write your Sass code like a programmer and why you would want to
  • Learn how to create a customizable Sass Animation mixin that works in all browsers
  • Explore the Compass framework
  • See Sass and Compass color functions in action
  • Create a CSS sprite with Compass (and no Photoshop)
  • How to use Media Queries and Sass to create responsive websites

Who is the target audience?

  • Front End Designers and Developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
02:31

Please note that since this course involves a lot of code, these videos are best watched in HD with full screen mode on a screen that is tablet size or larger.

Transcript (Introduction)
02:20
Section 2: Project Setup
Project Code
00:30
Class Project
Preview
02:32
Transcript (Class Project)
01:55
04:46
Transcript (Sass Watch Options)
03:13
05:55
Links:

Note: The Prepros app website has moved since I created this course. You can find the Prepros app here: https://prepros.io

I am no longer using this app for compiling my preprocessor code, so I am not familiar with the newest version. There may be a few differences in how I show it working in the videos, but it will probably be close. 

Transcript (Using Prepros App)
04:44
Section 3: Sass Math
03:40

Links:

Transcript (Sass Math)
02:36
Calculating Background Position
06:48
Transcript (Calculating Background Position)
04:20
Transitions
04:26
Transcript (Fixing the Transition)
02:59
Section 4: Sass Lists
07:05

Links:

Transcript (Sass Lists and Interpolation)
04:58
03:42

Links:

Transcript (Background Images)
02:20
03:20

Links:

Transcript (Padding)
02:06
09:30

Links:

Transcript (Category List)
06:24
Section 5: CSS Animations
05:48

Links:

Transcript (Animation - HTML Setup)
04:06
05:50

Links:

Transcript (CSS Animation)
03:44
06:39

Links:

Transcript (Refactor with Sass)
03:32
05:53

Links:

Transcript (Reusable Animation Code)
03:12
05:00

Links:

Transcript (Vendor Prefixes)
03:05
Cleanup
06:43
Transcript (Cleanup)
03:56
Section 6: Compass
07:19

Links:

Transcript (Using Compass)
05:26
06:47

Links

Transcript (Compass and CSS3)
04:37
04:47

Links:

Transcript (Compass Typography)
03:34
06:21

Links

Transcript (Compass Sprites)
04:08
03:38

Links

Transcript (Modifying a Sprite)
02:26
05:59

Links

Transcript (Color Functions)
04:22
03:45

Links

Transcript (Image Helpers)
02:27
Section 7: Sass and Media Queries
Responsive Websites
03:00
Transcript (Responsive Websites)
02:19
06:35

Links

Transcript (Sass and Media Queries)
04:04
07:53
Links

These 3 articles are part of a series and all are worth reading if you want to understand the concepts of using Media Queries with Sass

Transcript (Mixins with @content)
05:06
Section 8: Conclusion
Conclusion
01:16
Transcript (Conclusion)
01:03

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lisa Catalano, Web Developer, Designer, Teacher

I'm a web developer, designer, teacher and lifelong 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.

My full-time job is creating the front-end of an internal enterprise web application using Backbone/Marionette and other front-end technologies. I teach Photoshop to designers at community college and I work on small websites when I have time.

Ready to start learning?
Take This Course