Join Ray Villalobos for an in-depth discussion in this video Using the exercise files, part of Responsive CSS with Sass and Compass.
If you're a premium member of lynda.com, you have access to the Exercise Files used throughout this title. In the Exercise Files folder, you'll find folders for each video in the series. And inside those folders, you may find a finish folder, as well as a work in folder. The work in folder has a copy of the project when I start one of the videos. The finish folder has a copy of the project at the end. I'll start each movie by copying the contents of the work in folder, or the finish folder, onto the desktop. And I will have that folder open inside my favorite text editor.
If you're a monthly member or an annual member of lynda.com, you don't have access to the Exercise Files, but you can follow along from scratch with your own assets. So let's get started with responsive CSS with SAS 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
Skill Level Intermediate
Q: I am having trouble with the "Modularing your Sass with partials" video. Does Susy still support the @include at-breakpoint() mixin?
<div>A: The new version of Susy (2.1.3) doesn't support the @include at-breakpoint() mixin. This course is written for version 1.0 of Susy; however, you can still use the Susy 1.0 syntax as long as you modify the include command. In the styles.scss file, change the line that says: </div><div> </div><div><span style="font-family: Courier;">@import "susy" </span></div><div> </div><div>to </div><div> </div><div><span style="font-family: Courier;">@import "susyone" </span></div><div> </div><div>And you should be able to use the older syntax. There's more information at <a target="_blank" href="http://susy.readthedocs.org/en/latest/susyone">http://susy.readthedocs.org/en/latest/susyone/</a>.</div><div> </div>