Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Improve Your Workflow with Sass Pass Content Blocks to Mixins

Ker Sing Tan
Ker Sing Tan
10,569 Points

I am confused why we need @content?

I am confused why we need @content? I tried not to include @content, it seems all stay the same...

5 Answers

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

Hi Ker,

We add the @content to a mixin so that when we include the mixin as a rule between the curly brackets you can add additional styling/ properties and values to the mixin. Example

@include skewed {
background-color: $white;
bottom: -25px;
}


@include skewed {
background-color: $red;
top: -25px;
}

As you can see I have used the same mixin as a selector but given the mixin different property values within its rule and that is because of the @content was added to the mixin when I declared the mixin. The @content represents any additional property and values you need to add to your mixin when you include it in a rule of an element.

Tony B
seal-mask
.a{fill-rule:evenodd;}techdegree
Tony B
Front End Web Development Techdegree Student 10,423 Points

I think I get @content now, but I am curious as to why this wouldn't be the default behavior of sass? Like if @content was always there by default so you wouldn't have to type it. It's the main reason I was having such a hard time understanding what @content did; I assumed what it does was already the default behavior. I know there's a reason why, but it bothers me that idk what it is!

Ker Sing Tan
Ker Sing Tan
10,569 Points

thank you for explanation!

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

Hi Tony B,

I imagine the reason why this is not a default behaviour is that not all mixins need additional properties and values added to them when they are included. So adding @content or not gives you a choice.

David Shulkin
seal-mask
.a{fill-rule:evenodd;}techdegree
David Shulkin
Front End Web Development Techdegree Student 7,070 Points

Can't you add additional styles and values to the property itself rather than inside of the mixin? It seems to bring about the same result... Or is there something I am missing here because it seems pointless to use the @content directive....

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

Hi David Shulkin, I'm sorry I don't get what you mean by "adding additional styles and values to the property itself". Sass is the same as CSS. A CSS rule is made up of a selector and then in the curly braces, you add the properties you wish to change/ style for that selector.

The point of mixins is that instead of having to repeat the same properties and values for different elements/rules by using a mixin you can add multiple lines of code with just one line of code, in multiple rules and if you needed to add maybe one more property within a rule that you don't want to include for the other rules you've used the mixin in then that is why the @content comes in handy.

David Shulkin
seal-mask
.a{fill-rule:evenodd;}techdegree
David Shulkin
Front End Web Development Techdegree Student 7,070 Points

Hi, Samantha Atkinson. Thanks for the response.

Let me rephrase what I meant to say:

Rather than adding one more property within the content directive for a specific selector using a mixin, why not write that property within the selectors curly braces instead and avoid repeating patterns of writing @content in every mixin?