SASS - Create Reusable CSS with Mixins

HTML-CSS
1

Tell us what’s happening:

I dont know what i am doing wrong Im putting in the code how I think it should be displayed.Please help.

Your code so far

<style type='text/scss'>
#square {
  width: 50px;
  height: 50px;
  background-color: red;
  @include shape(50px,50px red);

#rect-a {
  width: 100px;
  height: 50px;
  background-color: blue;
  @include shape (100px, 50px, blue);
}

#rect-b {
  width: 50px;
  height: 100px;
  background-color: orange;
}
</style>

<div id="square"></div>
<div id="rect-a"></div>
<div id="rect-b"></div>
@mixin shape($w, $h, $bg-color){
  width:$w;
  height:$h;
  background-color:$bg-color;
}

Your browser information:

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

Challenge Information:

SASS - Create Reusable CSS with Mixins

1 Like
2

Hello,
first, you should move your mixin shape within the style tag, preferably at the beginning of it, then you should delete the initial styles of every rule,
the width, height and background-color properties since now you are adding them using the mixin
There is also a missing } at the end of the #square rule and inside of it the mixin call @include shape(50px,50px red); is missing a , after the second argument
In the second rule, that of the #rect-a, remove the space between shape and (100px, 50px, blue)
In the last rule, make sure to include the shape mixin with the required arguments to complete the test