Join Ray Villalobos for an in-depth discussion in this video Understanding Compass imports, part of Responsive CSS with Sass and Compass.
I wanted to talk about the structure of compass and how…you can import as little or as much as you want.…So, from the home page of compass if you click…on this reference link right here, you'll get to this page.…And there's a lot of navigation here and it can get a little bit confusing.…Notice that there's navigation right here, as well…as right here on the left hand side.…And some of these are also repeated down here.…Now,…what this is telling you is that when you install compass…with the Import Compass command like we've done in our project.…
So, if I go back here to our project.…We can see that in the styles CSS we're importing compass.…That means that we have imported these three different pieces of…functionality, the CSS features, the typography…features, as well as some utilities.…Notice that those are up here as well, but they're sort of not in the same order.…You have CSS3.…And then something called Helpers, something called Layout…which is actually down here and also over here.…So, the navigations are a little bit all over the place.…
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