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
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>