Use @if and @else to Add Logic To Your Styles (issues with completing the challenge)

HTML-CSS
1

Currently I am trying to understand why I am unable to complete this problem. I’ve created a sass mixin using all the requirements of the challenge , but when I run it , the code doesnt fufill all of the requirements for some reason.

Can someone help me understand why?

Your code so far


<style type='text/sass'>
 
 @mixin border-stroke($val) {
  @if $val == light {
    color: 1px soild black;
  }
  @else if $val == medium {
    color: 3px solid black;
  }
  @else if $val == heavy {
    color: 6px solid black;
  }
  @else {
    no border;
  }
}
  
  
  #box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
  }  
</style>

<div id="box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 11316.148.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.117 Safari/537.36.

2

  1. You are setting the color property, it should be setting the border property.

  2. You have a typo (1px soild black; should be 1px solid black;).

  3. In @else, you are not removing the border correctly (it should be border: none;).