The Next Step with Sass and Compass
3.9 (13 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.
203 students enrolled
Wishlisted Wishlist

Please confirm that you want to add The Next Step with Sass and Compass to your Wishlist.

Add to Wishlist

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 (13 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.
203 students enrolled
Created by Lisa Catalano
Last updated 1/2017
English
Learn Fest Sale
Current price: $10 Original price: $25 Discount: 60% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 29 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Understanding how to using Sass variables, mixins, extend, nesting and parent selectors
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.

Who is the target audience?
  • Front End Designers and Developers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 57 Lectures Collapse All 57 Lectures 04:15:33
+
Introduction
2 Lectures 04:51

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.

Preview 02:31

Transcript (Introduction)
02:20
+
Project Setup
7 Lectures 23:36
Project Code
00:30


Transcript (Class Project)
01:55


Transcript (Sass Watch Options)
03:13

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. 

Preview 05:55

Transcript (Using Prepros App)
04:44
+
Sass Math
6 Lectures 24:49

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
+
Sass Lists
8 Lectures 39:26

Transcript (Sass Lists and Interpolation)
04:58

Background Images
03:42

Transcript (Background Images)
02:20


Transcript (Padding)
02:06


Transcript (Category List)
06:24
+
CSS Animations
12 Lectures 57:30
Animation - HTML Setup
05:48

Transcript (Animation - HTML Setup)
04:06


Transcript (CSS Animation)
03:44

Refactor with Sass
06:39

Transcript (Refactor with Sass)
03:32


Transcript (Reusable Animation Code)
03:12


Transcript (Vendor Prefixes)
03:05

Cleanup
06:43

Transcript (Cleanup)
03:56
+
Compass
14 Lectures 01:05:38
Using Compass
07:19

Transcript (Using Compass)
05:26


Transcript (Compass and CSS3)
04:37


Transcript (Compass Typography)
03:34


Transcript (Compass Sprites)
04:08

Modifying a Sprite
03:38

Transcript (Modifying a Sprite)
02:26


Transcript (Color Functions)
04:22


Transcript (Image Helpers)
02:27
+
Sass and Media Queries
6 Lectures 28:58
Responsive Websites
03:00

Transcript (Responsive Websites)
02:19

06:35

Transcript (Sass and Media Queries)
04:04

Mixins with @content
07:53

Transcript (Mixins with @content)
05:06
+
Conclusion
2 Lectures 02:19
Conclusion
01:16

Transcript (Conclusion)
01:03
About the Instructor
Lisa Catalano
4.2 Average rating
65 Reviews
944 Students
4 Courses
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.