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
Ker Sing Tan
10,573 PointsI 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
Front End Web Development Techdegree Student 36,955 PointsHi 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.
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 PointsHi David Shulkin fellow Front End TD ,
I saw after that you asked in the Slack channels and Brian Jensen gave you an awesome answer : )
Ker Sing Tan
10,573 Pointsthank you for explanation!
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 PointsYou're welcome Ker Sing Tan : )
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 PointsHi 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
Front End Web Development Techdegree Student 10,254 PointsCan'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
Front End Web Development Techdegree Student 36,955 PointsHi 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
Front End Web Development Techdegree Student 10,254 PointsHi, 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?
Tony B
Front End Web Development Techdegree Student 10,702 PointsTony B
Front End Web Development Techdegree Student 10,702 PointsI 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!