SASS - Create Reusable CSS with Mixins

HTML-CSS
1

Hi, I encounter some error in this step which gives an error that there’s no @mixin named shape in the console. even though the code passed the test. Is it because I didn’t do it in the correct way?

<style type='text/scss'>
#square {
  @include shape(50px, 50px, red);
}

#rect-a {
  @include shape(100px, 50px, blue);
}


#rect-b {
  @include shape(50px, 100px, orange);
}


@mixin shape($w, $h, $bg-color) {
  width: $w;
  height: $h;
  background-color: $bg-color;
}
</style>

<div id="square"></div>
<div id="rect-a"></div>
<div id="rect-b"></div>

Your browser information:

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

Challenge Information:

SASS - Create Reusable CSS with Mixins

2

you need to have the mixin before the rules it is used in for things to work

1 Like
3

I should have declared @mixin shape in the start. Thanks for the clarity.