Https://www.freecodecamp.org/learn/front-end-libraries/sass/create-reusable-css-with-mixins

Tell us what’s happening:

   **Your code so far**

<style type='text/sass'>
@mixin border-radius($radius) {
 -webkit-bPreformatted textorder-radius:$radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}
 border-radius  maxin {
@include box-shadow(15px);
}

#awesome {
 @include border-radius;
   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/88.0.4324.190 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[quote=“nomo, post:1, topic:448752, full:true”]
Tell us what’s happening:

   **Your code so far**

<style type='text/sass'>
@mixin border-radius($radius) {
 -webkit-bPreformatted textorder-radius:$radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}
 border-radius  maxin {
@include box-shadow(15px);
}

#awesome {
 @include border-radius;
   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/88.0.4324.190 Safari/537.36.

Challenge: Create Reusable CSS with Mixins

Link to the challenge:

[/quote]

please help me on this challenge, it says Your code should call the border-radius mixin using the @include keyword, setting it to 15px .

Hi,
There’s a typo in your function definition, second line.
There’s a second typo, you’re calling ‘maxin’ and not ‘mixin’ and you’re using box-shadow instead of border-radius.
I think, I’m not sure, but I think you’re supposed to call the function inside #awesome { }
You’re adding it but you’re not calling it there.
Greets,
Karin

Hi @nomo !

Welcome to the forum!

I think you are making it more complicated than it needs to be.

You don’t need to add this stuff here

I would just follow the example that FCC gave you for boxshadow.
I would just change this part to webkit border radius. That might have also been a typo when you were entering code into the forum.

And then you just need to make that change here

You can look at the FCC example for guidance on how to fix that.

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

Hope that helps!

Thank you so much.
You help is much appreciated, I will keep on trying.

Kindly regards

I have been trying would you mind highlight for me so that I will understand better,
See attached photo below

Please post your code and not images when asking for help.

You have box-radius in the mixin, it should be border-radius

With that fix your code should be passing even though you really only should have one #awesome selector. Just add the @includes to the selector that was already there in the starter code and remove the extra one you added.

1 Like

Instructions on how to post code into the forum. :grinning:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).