Don t understand give parameter $radius

Tell us what’s happening:

Can t solve it

Your code so far


<style type='text/sass'>

@mixin border-radius($x, $y, $blur, $c){ 
-webkit-box-shadow: $x, $y, $blur, $c;
-moz-box-shadow: $x, $y, $blur, $c;
-ms-box-shadow: $x, $y, $blur, $c;
box-shadow: $x, $y, $blur, $c;
}

#awesome{
@include border-radius(15px, 0px, 0px, #fff);
}

#awesome {
  width: 150px;
  height: 150px;
  background-color: green;

}
</style>

<div id="awesome"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Create Reusable CSS with Mixins

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/sass/create-reusable-css-with-mixins

Hello!

In simple words, a mixin is a reusable piece of text that gets inserted wherever the mixin it’s included.

To solve the problem, you need to use the border-radius property inside your mixin and pass it the radius.

The first part of your code:

@mixin border-radius(

it’s right, but the rest of the mixin is wrong. The mixin should accept a single argument called $radius.

Side note: you don’t need to redefine #awesome, just include the mixin in the already existing #awesome definition.

@mixin border-radius($radius) {

-webkit-border-radius: $x, $y, $blur, $c;

-moz-border-radius: $x, $y, $blur, $c;

-ms-border-radius: $x, $y, $blur, $c;

border-radius: $x, $y, $blur, $c;

}

#awesome {

@include border-radius(15px);

}

why I failed again

1 Like

Because your mixin is not right yet.

Look at how the example mixin is used:

  • The box-shadow requires an x and y position arguments and the blur and color, hence it receives 4 parameters.
  • The border-radius requires only one parameter, hence the mixin receives a single parameter.

Where do $x, $y, $blur and $c come from in your mixin?

Everything that’s between the parenthesis after the name of the mixin is a parameter and can be used inside the body of it, but in your mixin those variables do not exist, so, which parameter exists in your mixin?

yeah I figured it out xd
thanks

1 Like

Awesome!

Glad I could be of help :slight_smile:,

Happy coding!

1 Like