Help with Sass, Use @if and @else please

HTML-CSS
1

Tell us what’s happening:
I think I’ve entered the code exactly correct. I double checked it elsewhere and then “ran the tests” in FCC it fails all these tests except the first one.

Your code so far


<style type='text/sass'>
  
 @mixin border-stroke($val) {
	@if $val == light  {
		1px solid black;
	}
	@else if $val == medium  {
		3px solid black;
	}
	@else if $val == heavy  {
		6px solid black;
	}
	@else if $val == none  {
		none;
	}
	@else   {
		none;
	}
}

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

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

Your browser information:

My Results are: // running test
Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.
Your mixin should have an @else if statement to check if $val is medium, and to set the border to 3px solid black.
Your mixin should have an @else if statement to check if $val is heavy, and to set the border to 6px solid black.
Your mixin should have an @else statement to set the border to none.
// tests completed.

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

2

Hi @texxs

You haven’t specified what CSS property to set inside the if statements, you’ve only got a value.

Should look like:

@if $var == key {
  property: value;
}
3

Well damn, that makes sense. thanks!