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 Sass Basics Improve Your Workflow with Sass Pass Content Blocks to Mixins

Ibrahim Altamemy
Ibrahim Altamemy
2,039 Points
Posted by Ibrahim Altamemy
Ibrahim Altamemy
2,039 Points

Why should pass block of style to @mixin ?

lets say I have this code:

@mixin myStyle{ color: red; @content }

.mydiv{ include myStyle{ font-size: 1.5em; } } Why I sould wrtie it like previous, When I could write it like this:

.mydiv{ @include myStyle font-size: 1.5em; }

1 Answer

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

I would suspect that if you do not first define the mixin, it will be a bit hard to include it later. If you are suggesting leaving out the @mixin line.

But, from the title of the session, I suspect the code is trying to explain the usage of @content, giving a simple introduction, before getting into more complex cases.

From what I can tell, mixins are really shortcuts for later use, so you define it in one place, then include it in as many as you need to. If you later decided to change something included with the mixin, you can make the change in just one place, rather than having to find every place you used that set of styles and edit each one individually.