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
Robin Watts
Front End Web Development Techdegree Graduate 13,893 PointsDo you need @content?
Hi all, I've seen a response to this question but I'm still confused - why do you need to use @content when you could just add the additional properties above the @include part of the declaration you're applying your @mixin too? I guess there's something I'm missing here!
2 Answers
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 PointsIn addition to taking arguments, a mixin can take an entire block of styles, known as a content block. A mixin can declare that it takes a content block by including the @content at-rule in its body. The content block is passed in using curly braces like any other block in Sass, and it’s injected in place of the @content rule.
@mixin hover {
&:not([disabled]):hover {
@content;
}
}
.button {
border: 1px solid black;
@include hover {
border-width: 2px;
}
}
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 PointsHi Robin,
I think it's more of a style choice. For me, it makes sense because the extra rules are only there to make sure the skewed @mixin works. @content gives us the ability to modify our @mixins as we need them and in this case we needed extra rules to make sure the skew showed up on the page. For me it makes sense semantically to have those two rules grouped with the @mixin.
I hope that helps! Happy coding!
JASON LEE
17,351 PointsRefactoring the custom skew properties with the @content doesn't seem to save any lines of code or optimize DRY principle. It must be more for organization and better compartmentalizing the code's function.