Cant' seem to: Create Reusable CSS with Mixins

HTML-CSS
1

Objective:
Write a mixin for border-radius and give it a $radius parameter. It should use all the vendor prefixes from the example. Then use the border-radius mixin to give the #awesome element a border radius of 15px.

I’ve tried lots of different things, learned somethings that FCC should have told me before asking me to do this and I still can’t seem to shake the following fails:
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.

I’m sure I’m missing something else, just don’t know what.


<style type='text/sass'>
  $radius:15px;
  @mixin border-radius($radius)  {
    -moz-border-radius:$radius;
    -webkit-border-radius:$radius;
    -webkit-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>

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

2

Hi @texxs

There’s a couple of issues, I can see:

  1. You’ve defined -webkit-border-radius:$radius twice in the mixin, the browser would ignore that but because the tests use regex to check you’re work, its likely not liking the duplication.
  2. You’re unnecessarily using “explicit keyword arguments”, which does work, however, because the tests use regex, they’re probably looking for it to be like this: @include border-radius(15px). Also, I just noticed you have a semi-colon that shouldn’t be there: border-radius>>>:<<<($radius: 15px);
3

Thanks for catching these things. removing the extra -webkit-border-radius:$radius line got rid of one error.
I have to admit, that as a beginner I have no idea what you mean by using unnecessary explicit keyword arguments". But I sure would like too.
Were you referring to the first line?

I made a code pen and it’s error checking says: “Illegal nesting: Nothing may be nested beneath variable declarations.”
“It is illegal to indent at the start of document”
and
"Invalid CSS after "($radius) “: expected expression (e.g. 1px, bold), was “{””
I tried adding “15px” and still got the same error.

2 hours total on this lesson so far. :frowning: This is what I have now:

@mixin border-radius($radius)  {
  -moz-border-radius:$radius;
  -webkit-border-radius:$radius;
  -ms-border-radius:$radius;
  border-radius:$radius;   
}
$radius:15px;

#awesome {
  width: 150px;
  height: 150px;
  background-color: green;
  @include border-radius($radius: 15px)
}
4

Thanks to this post, I was able to see what I was doing wrong, and right. So thanks to both of you for the question and answer.
Texxs, your last line of code
(@include border-radius($radius: 15)
is incorrect, also, below the mixin you declared the value of $radius: 15px; when the parameter needs to be passed into border-radius function. So it’s code that should not be there.
The final working code is this;
@mixin border-radius($radius) {
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
$radius:15px; //redundant code, may cause future errors, delete this

#awesome {
width: 150px;
height: 150px;
background-color: green;
@include border-radius(15px); //code passed into the parameter here
}

1 Like
5

hey guys, I was struggling for a while with this one, because of having…

-o-border-radius: $radius;

removed the vendor prefix it and it moved forward.
just in case someone else is struggling :wink:

6

I hope this code will help you.

<style type='text/sass'>
$radius: 15px;

  @mixin border-radius($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
  }

  border-radius mixin{
    @include border-radius(15px);
  }

  #awesome {
    @include border-radius($radius);

    width: 150px;
    height: 150px;
    background-color: green;
    
    
  }

</style>

<div id="awesome"></div>
7
@mixin border-radius($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } border-radius mixin{ @include border-radius(15px); } #awesome { @include border-radius(15px); width: 150px; height: 150px; background-color: green; }``