Use @if and @else to Add Logic To Your

HTML-CSS
1

Tell us what’s happening:
This code fails. As far as I can tell everything is ok. Nothing missing but still I get the error :
// running tests

Your mixin should have an @else statement to set the border to none.

// tests completed

Is it a bug or something?

Thanks for looking into it.
Your code so far


<style type='text/sass'>
  @mixin border-stroke($val){
    @if $val == light {
      border: 1px solid black;
      }
      @else if $val == medium {
      border: 3px solid black;
      }
      @else if $val == heavy {
      border: 6px solid black;
      }
      @else $val == none {
      border: none;
      }
  }
  
  
  #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 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles

2

After some hair pulling I found it!

The error is in @else $val == none //
I should write
@else {
border:none;
}

Big thanks to myself :smiley:

1 Like
3

On this line you have a comparison expression without an if

@else $val == none {

In the example there were if…else…if conditional statements testing for “danger”, “alert”, and “success” then the final else was a catch-all for anything that wasn’t one of the previous possibilities.

1 Like
4

Thank you for your advice. I have found it earlier. The last on is just
@else{ border:none; }

it does not need to check the $val.