Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Getting Modular with Mixins and Functions Colors with Sass Maps

Jason Mc Dermott
Jason Mc Dermott
11,496 Points

$ui-colors and $map

Add the end Guil uses $ui-colors for the selectors but before changed the directive rule to be wrapped in a mixin of $map, just wondering did I miss something here, thanks.

Could you link to the video maybe it will shake some cobwebs

Jason Mc Dermott
Jason Mc Dermott
11,496 Points

Start at 4:09 in to the vid to see where Guil makes the changes. I've just watched it again and from what I can understand is he's gone and created the $map mixin for applying to different contexts, but also uses the $ui-colors @include for button. So basically making both for different purposes? but doesn't show making both he just changes $ui-colors to $map.??https://teamtreehouse.com/library/modular-css-with-sass/getting-modular-with-mixins-and-functions/colors-with-sass-maps.

1 Answer

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 Points

Hi Jason,

Guil creates a mixin to make our $ui-color map more flexible so we can use it for more than one selector when needed. It makes it more modular by wrapping it in a mixin. The reason why we change the $ui-colors to $map and give our mixin bg-colors the argument $map is so that when we include the mixin bg-colors we could pass any color map we've created as the argument.