Create Reusable CSS with Mixins 5

HTML-CSS
1

Tell us what’s happening:
How in the world do I complete this one? I’ve looked at the “Get a Hint” button/page, and it never helped me one bit. I’m so confused as I’ve never learned Sass before. I’m needing to learn it for school, as I’m trying my best to do great in school with coding and remembering it all.

Your code so far


<style type='text/sass'>
  
  @mixin custom-mixin-name($offsetX, $offsetY, $blurRadius, $color) {
    -webkit-border-radius: $offsetX, $offsetY, $blurRadius, $color;
    -moz-border-radius: $offsetX, $offsetY, $blurRadius, $color;
    -ms-border-radius: $offsetX, $offsetY, $blurRadius, $color;
    text-shadow: $offsetX, $offsetY, $blurRadius, $color;
  }
  h2 {
    @include custom-text-shadow(1px, 3px, 5px, #999999);
  }

  
  #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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Avast/73.0.1258.87.

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

2

It is a bit technical, especially if you haven’t done much programming yet.

  1. The mixin should be named border-radius (replace custom-mixin-name with border-radius).

  2. The mixin should only have one parameter named $radius (the mixin only takes one argument, replace all the parameters inside the parentheses with just $radius).

  3. The none prefixed declaration should be declared as border-radius (you have text-shadow, replace it with border-radius).

  4. Use @include border-radius inside the #awesome selector (delete the h2 selector, add @include border-radius to the #awesome selector).

Post your new code if you need more help and remember to use the code forum formatting (press the </> button in the toolbar)