Learn how Compass (powered by Sass) can help you build a responsive layout workflow that is easier, faster, and more compatible than CSS alone.
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.
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- 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