Join Ray Villalobos for an in-depth discussion in this video Finishing our layout, part of Responsive CSS with Sass and Compass.
So we're almost done with our layout and I wanted to show you how…to columnize this section right here with…the speakers and I'm also going to talk about…how to debug CSS when you're working with SASS because it's a little bit different…so I'm going to switch over to my layout files so right now I'm in layout.…SCSS .…And I want to move over all the way down to…the bottom and modify something right after this small tag and…before the medium section.…So I'm going to add a call to image tags and have a class of speaker.…
And what I want to do here is make sure I float these.…I want to prepare them to work on a three column layout.…So I'll set the width to 40%, and set the max.…Width to a 177 pixels.…And then set the margin to zero auto, which usually centers…them within a layout.…And then I want to change the border radius.…So I'll do an include, border, radius.…And set that to 50%, which should make them circular.…So I'm going to save that, and I'll switch over to my preview.…
It looks like nothing's changed.…
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