Note: I am providing CC for all videos, but will also post the transcripts as well. These articles do not need to be read, but are here if you want.
Hi, I’m Lisa Catalano and this is The Next Step with Sass and Compass. This course is for people who already know a little bit about Sass and are ready to take their skills to the next level. Sass is already very useful and handy after you learn about nesting, variables and mixins, but it can become extremely powerful when learn some of the more advanced techniques we talk about in this course.
I created this course as a follow up course to my Step by Step Sass course. You do not need to have taken that course to follow along. However, you should understand the basics of Sass including using variables, nesting, mixins, extend, partials and the parent selector.
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.
We will learn how to debug your code with @warn and explore some of the tools that make working with Sass easier like the Prepros app and the SassMeister Sass code playpen.
We will work on a real project and create a CSS only animated slideshow and make it completely modifiable using Sass. We will 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.
Finally, we will also dig into how media queries work in Sass and how @content can help developing responsive websites much easier.
There is a lot of content in this course, and we move quickly. I try to create tight videos without a lot of wasted time, so be prepared to pause the videos when needed, especially if you are coding along with me. This course will take more time to get through than my previous course, but the skills you learn will be more powerful and can save you even more time.
I filmed this course on a Windows machine, and I am using the Brackets code editor to write my code. Sometimes I show the keyboard shortcuts on my screen, mostly to let you know that I am saving my work, and it is getting re-compiled. Many or most of you will be on a Mac, so remember that any keyboard shortcut I use will be different for you, most likely you will need to replace the Ctrl key with the Command key.
So, if you are ready to take the Next Step with Sass and Compass join me in the next lesson and we’ll get started.