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 ,
Happy coding!
1 Like