Need Help With CSS Mixins Exercises!

Tell us what’s happening:
I need a bit of help to better understand how to create and format proper CSS mixins. How do I designate the 15px border-radius using a CSS mixin ? Any helpful links would be appreciated thank you.

Your code so far


<style type='text/scss'>



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

}



@mixin box-shadow($x, $y, $blur, $c){ 
-webkit-border-radius: $x $y $blur $c;
-moz-border-radius: $x $y $blur $c;
-ms-border-radius: $x $y $blur $c;
box-border-radius: $x $y $blur $c;
}
div {
@include border-radius(0px, 0px, 15px, #fff);
}
</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15.

Challenge: Create Reusable CSS with Mixins

Link to the challenge:

You almost got it right. Here, everything was in a the mixin for border-radius, but you declared it as a box-shadow.

1 Like

Thanks so much!! Clearly I’m in need of a coffee. Still getting the following errors (see below) after changing the $blur parameter to $radius. Any idea what needs to be done here ?

Your code should declare a mixin named

border-radius

which has a parameter named

$radius

. Your code should include the

-webkit-border-radius

vender prefix that uses the

$radius

parameter. Your code should include the

-moz-border-radius

vender prefix that uses the

$radius

parameter. Your code should include the

-ms-border-radius

vender prefix that uses the

$radius

parameter. Your code should include the general

border-radius

rule that uses the

$radius

parameter. Your code should call the

border-radius mixin

using the

@include

keyword, setting it to 15px.

Here is my modified code:

#awesome { width: 150px; height: 150px; background-color: green; } @mixin border-radius($x, $y, $radius, $c){ -webkit-border-radius: $x $y $radius $c; -moz-border-radius: $x $y $radius $c; -ms-border-radius: $x $y $radius $c; box-border-radius: $x $y $radius $c; } div { @include border-radius(0px, 0px, 15px, #fff); }

Maybe this is another Safari issue yet again.

Hey @markbrathwaite,

1 Like