Responsive CSS with Sass and Compass

with Ray Villalobos
please wait ...
Responsive CSS with Sass and Compass
Video duration: 0s 3h 22m Intermediate


Using a framework helps simplify your workflow and makes writing CSS fun again. Learn how Compass (powered by Sass) can help you build responsive layouts that are easier, faster, and more compatible than using CSS alone. In this course, Ray Villalobos shows how to automate your workflow with Grunt.js, scaffold your HTML, modularize your Sass with partials, and get started styling with variables and mixins. Plus, learn how to create a mobile-first grid with Susy—without adding nonsemantic HTML markup.

Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.

Topics include:
  • What are Sass and Compass?
  • Adding version control
  • Setting up a workflow with Grunt.js
  • Modularizing your Sass with partials
  • Creating a color palette with variables
  • Using Compass mixins
  • Creating a mobile-first layout
  • Creating media-query breakpoints with Susy
  • Designing a responsive grid with Susy
CSS Sass Compass


- [Voiceover] Hi this Ray Villalobos and welcome to Responsive CSS with Sass and Compass. In this project based course, I'm gonna show you how to work with Sass and Compass, which makes writing CSS fun again by simplifying the way you write rules for the language. I'll start by showing you how to create an efficient work flow with Crunch AS. This is gonna help you automate the process of combining and compressing your JavaScript as well as CSS files. Plus it'll also help you create a workflow that is easily shareable in a team environment. I'll show how you how to scaffold the website so that you can understand how to best create a mobile first layout for your pages.

Then we'll examine how to create modules and partials for your Sass, how to use variables to create a color palette, and control Sass functions and Compass mix-ins in your code. Finally, I'll show you how to create a mobile first responsive grid with the Susie framework, which sits on top of Compass to give you an easy way to create responsive code without having to add markup to your HTML. There's a lot to cover so let's get started with Responsive CSS with Sass and Compass.

please wait ...