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 trialznzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Pointshelp I dont know what to do
Inside the button mixin, write the directive that lets you pass content blocks to mixins.
$btn-background: #dc143c;
/* Write your SCSS code below. */
@mixin button {
font-size: 1.25em;
background-color: $btn-background;
}
a { @include button; }
Thirumalai vasan
iOS Development Techdegree Student 1,534 Points(```) $btn-background: #dc143c;
/* Write your SCSS code below. */
@mixin button { @content; font-size: 1.25em; background-color: $btn-background; } a { @include button; } (```)
4 Answers
NDUMISO MZAMANI SITHOLE
8,650 PointsStill saying bummer guy pliz assist here !!!!!!!!!!
@mixin button { @content; font-size: 1.25em; background-color: $btn-background; }
a { color: #f0f8ff; @include button; }
NDUMISO MZAMANI SITHOLE
8,650 Pointsam confused now do not understand can some show me the answer
Will Berlanga
18,825 PointsHere's the final answer:
$btn-background: #dc143c;
/* Write your SCSS code below. */
@mixin button {
@content;
font-size: 1.25em;
background-color: $btn-background;
}
a {
color: #f0f8ff;
@include button;
}
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Pointsthank you
Will Berlanga
18,825 PointsNot a problem...I'm glad I could help. How are you liking SASS so far? Have you used it for any projects despite the Treehouse lessons?
NDUMISO MZAMANI SITHOLE
8,650 Pointsthank you excellent have finished website design course
Will Berlanga
18,825 PointsWill Berlanga
18,825 Points@content;
Adding the preceding line to your mixin allows you pass content from where you use your mixins to the actual mixin itself.
Here is the documentation from the SASS documentation page (http://sass-lang.com/documentation/file.SASS_REFERENCE.html):
Passing Content Blocks to a Mixin
It is possible to pass a block of styles to the mixin for placement within the styles included by the mixin. The styles will appear at the location of any @content directives found within the mixin. This makes it possible to define abstractions relating to the construction of selectors and directives.
For example:
Generates:
The same mixins can be done in the .sass shorthand syntax:
Note: when the @content directive is specified more than once or in a loop, the style block will be duplicated with each invocation.