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 Alexander Stevens
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Stevens
Front End Web Development Techdegree Graduate 12,428 Points

Stuck on @mixin's

The question given to me is this: Create a mixin called square that takes two arguments: one called "size" that will set the height and width, and another called "color" that will set the color of a 1px solid border.

I just don't understand how I can create a border that I can define a $color value and apply it to that border in scss?

style.scss 
@mixin square($size, $color) {
  width: $size;
  height: $size;
  color: $color;  
}

2 Answers

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi Alexander Stevens,

Your code looks great. You’re close to completing the first part of this challenge.

There are the following properties in css:

border-style border-width border-color

border-style describes the type of border (ie. solid, dotted, etc).

border-width describes the width of the border (ie. 1px, 2rem, 4em, etc).

border-color describes the color of the border (ie. #f9f9f9, red, rgb(37, 141, 12), etc).

There also is a border property which allows you to combine the three aforementioned properties.

It works like this, for example: border: 2px dotted orange

Hopefully that’s enough of a hint to help you get to one of the correct answers on your own, but if you need a little additional assistance, let me know.

Alexander Stevens
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Stevens
Front End Web Development Techdegree Graduate 12,428 Points

I am aware of the border property, I'm just struggling on where to implement it. Do I need an @include defining the size and color? But what element would I put that under, and does that element where I put a border rule? I'm just totally lost on this section of the course.

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi Alexander Stevens,

You don’t need an @include. You already have a variable being passed into the mixin that defines the color. Just as $size defines the size of the width and height, $color will define the color.

But the color property—which you have the $color set to—currently affects the font color, not the border color.

In order for that variable to be used to change the color of the border you have to set the value of the border-color property to be equal to $color.

Now you can just set the border-color to be $color, and then set the border-style and border-width separately.

OR you can combine the three values using the border property.

Does that make sense?