Sass: reusable CSS

Tell us what’s happening:

Your code so far


<style type='text/sass'>
@mixin border-radius($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;
border-radius: $x, $y, $blur, $c;
}
#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/78.0.3904.108 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

You’re only supposed to give the border-radius mixin a single $radius parameter. Then the properties in that mixin should take that parameter as their values.

After that you need to add an @include at the end of the #awesome selector

1 Like