Use @if and @else to Add Logic To Styles

Use @if and @else to Add Logic To Styles
0

#1

Tell us what’s happening:

It’s telling me I’m missing all the requirements basically except for the creation of the mixin. What am i doing wrong?

Your code so far


<style type='text/sass'>
  
  @mixin border-stroke($val) {
    @if $val == light {
      border-stroke: 1px solid black;
    }
    @else if $val == medium {
      border-stroke: 3px solid black;
    }
    @else if $val == heavy {
      border-stroke: 6px solid black;
    }
    @else {
      border-stroke: 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/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36.

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


#2

You should set border to the style instead of border-stroke. just delete all the “-stroke” in your expressions and I think you will pass.


#3

Solution:

<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 {
      border: none; 
    }

  }
  
  
  
  #box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border(medium);
  }  
</style>

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

#4

Ah, thanks for pointing out my silly mistake. Your solution worked, thank you!


#5

Good! sometimes FCC’s English is somehow hard to understand