SASS - Create Reusable CSS with Mixins

HTML-CSS
1

Tell us what’s happening:

I understood everything, until I got to the CSS with mixins.

I’ve read the instructions, comments & solutions on this topic. But the code still checks none of the boxes.

Your code so far

<style type='text/scss'>

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

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

Your browser information:

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

Challenge Information:

SASS - Create Reusable CSS with Mixins

2

Write a mixin named shape

Start with the first instruction/test.

I don’t see a mixin named “shape”?

3

The challenge was updated recently but the solution code didn’t get updated. I just updated the solution code.

But please understand that it is very important you do not just blindly copy/paste solution code, as that will teach you nothing.

2 Likes
4

Noted.

Thank you very much.

I usually look for help, as my last resort.

After reading the instructions, and hints, over, and over again, for about 1+ hours, I eventually got my solution. :smiley: :smiley: :smiley:

You just need to declare the mixin shape, like this:

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

Then the rest is future, if you just add @include shape, on your selectors.
:wink: :wink: :wink: :wink:

1 Like