Sass @include problem

I think my code is perfect but what do I know? I don’t know how to write Sass and FCC isn’t really telling me! so I keep failing the challenge over and over (3 days now about one hour per day).
It’s seems like a simple objective, create a simple mixin and use it. specifics here:

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.

My code:

<style type='text/sass'>
  
@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)
}
</style>

your mixin specification is correctly written , but how you are calling the mixin is not, the lesson gives you an example of how to call a mixin:

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

You have to call your mixin in a similar way for the element that you want to target

1 Like

Someone else told me the to remove the semicolon from the @include statement as that would be a syntax error. evidently not. I put it back and it passed all tests!

Thanks!

The semi colon is the only way the machine knows that a css statement has ended

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or pair).
Syntax - CSS: Cascading Style Sheets | MDN

But your include statement was at the end of the block so for regular css it shouldn’t have mattered, but it does because this is a Sass mxin and not regular css.

Also, you don’t need to specify key:value pairs as argument when calling the mixin, the value is enough as it knows that there is only one argument to it since you specified it when you created the mixin.

Hi @texxs,

Your code is good, but, you miss to put the property that you will set @include of your @mixin in it
so, in easy way you should put border-radius: before you put @include border-radius(15px)

If you stuck, here is the solution:

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

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

Hope this will help you to solve the problem, good luck and have a happy coding.

Regards,
Ali Mosaad

This worked for me…
If you stuck, here is the solution:

@mixin border-radius($radius) {
-moz-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(15px);
}