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 Write a Mixin

help I dont know what to do

Inside the button mixin, write the directive that lets you pass content blocks to mixins.

style.scss
$btn-background: #dc143c;

/* Write your SCSS code below. */
@mixin button {
font-size: 1.25em;
background-color: $btn-background;
}

a { @include button; }
Will Berlanga
Will 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:

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

Generates:

* html #logo {
  background-image: url(/logo.gif);
}

The same mixins can be done in the .sass shorthand syntax:

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

Note: when the @content directive is specified more than once or in a loop, the style block will be duplicated with each invocation.

(```) $btn-background: #dc143c;

/* Write your SCSS code below. */

@mixin button { @content; font-size: 1.25em; background-color: $btn-background; } a { @include button; } (```)

4 Answers

Still saying bummer guy pliz assist here !!!!!!!!!!

@mixin button { @content; font-size: 1.25em; background-color: $btn-background; }

a { color: #f0f8ff; @include button; }

am confused now do not understand can some show me the answer

Will Berlanga
Will Berlanga
18,825 Points

Here'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;
}

thank you

Will Berlanga
Will Berlanga
18,825 Points

Not 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?

thank you excellent have finished website design course