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 (10 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.
187 students enrolled
$25
Take This Course
  • Lectures 57
  • Contents Video: 2.5 hours
    Other: 2 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

What 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)
Article
Section 2: Project Setup
Project Code
Article
Class Project
Preview
02:32
Transcript (Class Project)
Article
04:46
Transcript (Sass Watch Options)
Article
05:55

Prepros App

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

Links:

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

Links:

Transcript (Sass Lists and Interpolation)
Article
03:42

Links:

Transcript (Background Images)
Article
03:20

Links:

Transcript (Padding)
Article
09:30

Links:

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

Links:

Transcript (Animation - HTML Setup)
Article
05:50

Links:

Transcript (CSS Animation)
Article
06:39

Links:

Transcript (Refactor with Sass)
Article
05:53

Links:

Transcript (Reusable Animation Code)
Article
05:00

Links:

Transcript (Vendor Prefixes)
Article
Cleanup
06:43
Transcript (Cleanup)
Article
Section 6: Compass
07:19

Links:

Transcript (Using Compass)
Article
06:47

Links

Transcript (Compass and CSS3)
Article
04:47

Links:

Transcript (Compass Typography)
Article
06:21

Links

Transcript (Compass Sprites)
Article
03:38

Links

Transcript (Modifying a Sprite)
Article
05:59

Links

Transcript (Color Functions)
Article
03:45

Links

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

Links

Transcript (Sass and Media Queries)
Article
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)
Article
Section 8: Conclusion
Conclusion
01:16
Transcript (Conclusion)
Article

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