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 Add Reusable Logic to Your Sass Advanced Mixins Challenge

Posted by David Moorhead
David Moorhead
18,005 Points

Your help is appreciated for a SASS @function that's beyond my scope in Task 4 of 4.

Here are the instructions for Challenge Task 4 of 4. Thank You for helping.

Switch the order of the square arguments. Be sure to specify the variable for each argument.

style.scss 
@mixin square ($color: black, $size) {
  border: 1px solid $color; 
  height: $size;
  width: $size;
  }
.box { @include square(red, 50px); }

/*-- the bummer read: The mixin should take 2 parameters, '$size' and '$color'.

This is the answer that passed Task 3 of 4:

@mixin square ($size, $color: black) {
  height: $size;
  width: $size;
  border: 1px solid $color; 
  }
.box { @include square(50px, red); } --*/

3 Answers

trio-group I.AM
trio-group I.AM
25,713 Points

Hi David,

I feel like the instructions are confusing you a little bit. You have switched the order of the parameters in the mixin but you are actually supposed to switch the order of the arguments you are passing in your @include.

Fix the mixin (use the code that passed before) and only switch the order of your arguments. Of course, in order for the code to work properly you need to tell the mixin that you are passing color first and then size ("Be sure to specify the variable for each argument").

Hope this helps.

David Moorhead
David Moorhead
18,005 Points

THANK YOU, trio interactive! What you wrote here was an understatement. :)

I feel like the instructions are confusing you a little bit.

It will take me still more study and practice to understand SASS, that is, beyond a certain point.

David

Brandon Gault
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Gault
Front End Web Development Techdegree Graduate 17,539 Points
Brandon Gault
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Gault
Front End Web Development Techdegree Graduate 17,539 Points

I've been stuck on this challenge (4/4) all day and have tried everything I can think of to get it to work to no avail. Please help.

Sarah Lorenzen
seal-mask
.a{fill-rule:evenodd;}techdegree
Sarah Lorenzen
Front End Web Development Techdegree Student 17,652 Points
Sarah Lorenzen
.a{fill-rule:evenodd;}techdegree
Sarah Lorenzen
Front End Web Development Techdegree Student 17,652 Points

This was a toughie for me... Including my solution to help others....

@mixin square($size, $color: black) { height: $size;
width: $size; border: 1px solid $color; } .box { @include square($color:red, $size:50px); < ---- these are the arguments they're talking about... }

Originally mine were (50px, red) but when reversing the order, you then have to put the $variable name in front so the function pulls the correct value for each.

Took me mannnnnny tries to understand this. I really think the wording could be changed.