Join Ray Villalobos for an in-depth discussion in this video Controlling mixin parameters, part of Responsive CSS with Sass and Compass.
In the last movie, I showed you how to make…your HTML more semantic by removing common mark up elements.…In this video, I'm going to show you how to control some…of the mixins you import by adding parameters and creating defaults.…So a common style to add to images is a border radius.…Most of the time that involves adding…a bunch of prefixes for the different browsers.…With compass, you can use a single call.…So if you wanted to make all these speaker artists here have a certain border radius.…
We could just say add, include.…Border radius and then use a parameter right here.…So I'll say five pixels for right now and when we save…that you can see that the artists now have slight rounded edges.…Now if you take a look at the documentation for border radius,…you can see that there is a few ways of doing it, so here's some…examples you can use a simple include…border radius and use one or two parameters.…Or you can also use four parameters, or sort of go crazy with it.…
Now if you notice, up here, there's a section called Configurable Variables.…
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