Join Ray Villalobos for an in-depth discussion in this video Setting up Susy's defaults, part of Responsive CSS with Sass and Compass.
Susy is a framework for creating responsive grids in Compass.…It's meant to compliment Compass and replace the blueprint…system that is now getting a little bit old.…Susy provides an additional set of mix-ins that let's…you easily control your layout from within SAS files.…One thing I love about Susy, is that it helps you…create layouts without having to add additional markup into your HTML files.…This is one of the problems with a framework…like Bootstrap.…When you code layouts, you end up with all kinds of unnecessary classes in your HTML.…
So, if you look at this example right here, you can see that you usually create…a div with a class of row and then, a bunch of divs for the different columns.…And so you end up with all this additional markup you don't really need in your HTML.…And if you want to change things, you have to go back into your HTML and recode…it in order to change your layout.…Technically, HTML should be for describing the content not for making layout changes.…So Susy provides a way of doing layouts without having to dirty up your HTML.…
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