How will i fix this problem

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style type='text/scss'>
@mixing border-radius ($radius){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}


#awesome {
  width: 150px;
  height: 150px;
  background-color: green;
@include border-radius($radius, 15px)
}
</style>

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

Your browser information:

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

Challenge: Create Reusable CSS with Mixins

Link to the challenge:

2

When you are including your mixin, you don’t need to use your variable name, just type in the property value like it’s normal css. So example

/* I created a mixin for backdrop-filter */
                                       ↓↓↓↓↓↓/* This is just a parameter */
@mixin backdrop-filter ($filter){
  -webkit-backdrop-filter: $radius;
  -moz-backdrop-filter: $radius;
  -ms-backdrop-filter: $radius;
  backdrop-filter: $radius;
}

/* Then I'm going to include it in my paragraph */
p {
  @include backdrop-filter(blur(4x));
}