Leon;

Greetings!

So, here is Task 1, let's walk through it step by step...

Task 1

Create a mixin called square that takes two arguments - one called "size" that will set the height and the width, and one called "color" that will set the color of a 1px solid border.

1. Create a mixin called square -> @mixin square

2. ...that takes two arguments -> @mixin square(arg1, arg2)

3. ... -one called "size" that will set the height and width:

@mixin square($size, arg2) {
    height: $size;
    width: $size;
}

4. ...and one called "color" that will set the color of a 1px solid border.

@mixin square($size, $color)
{
    height: $size;
    width: $size;
    border: 1px solid $color;
}

Now that we have this mixin, who cares? What does it allow us to do, right? Well, let's say that we want to create a bunch of different squares in our CSS. Now we could write out the code each and every time in CSS like this:

.square_1 {
    height: 20px;
    width: 20px;
    border: 1px solid red;
}

.square_2 {
    height: 10px;
    width: 10px;
    border: 1px solid blue;
}

And so forth. Or, for each of our separate items, square classes in this case, in Sass we can do:

.square_1 {
    @include square(20px, red);
}

.square_2 {
    @include square(10px, blue);
}

Both of those will produce the same code in CSS, but there is much less code to type using Sass. Not too much of a savings here, but what if you were producing 100 or 1000 square classes? In addition to the savings in typing, think of how much simpler it will be if you want to increase the border to 5px in all of your squares. You would only have to make the change in the @mixin square and not all 1000 separate pieces of code.

Hope it helps,

Ken