Create Reusable CSS with Mixins does not work

Tell us what’s happening:
Could anyone help me explain why this does not work?

Thanks!

Your code so far


<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;
  @inlcude border-radius(15px);
}
</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36.

should be include not inlcude.

I’ll try. I use straight CSS, not SASS but there shouldn’t be that much difference.

It looks like you’ve got a couple of things backwards. Here’s how I have one of my mixins set up and then how it’s called;

@mixin text-shadow {
text-shadow: 1px 1px 1px #AAA;
}

#h2 {
@include text-shadow;

Note that the text-shadow is defined in the mixin and then called where needed by the use of @include.
Also note that you spelled “include” incorrectly.

On a side note, you don’t need those vendor prefixes any longer. ‘border-radius’ is supported by all the browsers. Go to https://caniuse.com to see what is and what is not supported by different browsers.

Hope this helps.

Thanks! Sorry for the idiot question …