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

Posted by Robin Watts
.a{fill-rule:evenodd;}techdegree seal-36
Robin Watts
Front End Web Development Techdegree Graduate 13,893 Points

Do 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 Points
Dylan Bailey
.a{fill-rule:evenodd;}techdegree seal-36
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 Points

In 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points
Clinton Hays
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points

Hi 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
JASON LEE
17,352 Points

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