Use @if and @else to Add Logic To Your

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);

<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:

After some hair pulling I found it!

The error is in @else $val == none //
I should write
@else {

Big thanks to myself :smiley:

1 Like

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

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.