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

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
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

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.

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

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?