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