CSS Sass Basics Add Reusable Logic to Your Sass Advanced Mixins Challenge

Alexander Stevens
seal-mask
.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
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.

Alexander Stevens
seal-mask
.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
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?