SASS - Use @if and @else to Add Logic To Your Styles

Tell us what’s happening:

everything is written correctly but still it is not working.

Create a mixin called border-stroke that takes a parameter $val. The mixin should check for the following conditions using @if, @else if, and @else directives:

light - 1px solid black
medium - 3px solid black
heavy - 6px solid black

If the $val parameter value is not light, medium, or heavy, then the border property should be set to none.

Error: Invalid CSS: @else must come after @if
on line 6:2 of /stdin

}@else if $val == medium{

Your code so far

<style type='text/scss'>

@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-stroke(medium);
  }
</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

SASS - Use @if and @else to Add Logic To Your Styles

1 Like

HI @Sabreenam

You seem to have an extra curly brace.

Happy coding

Thank you so much.
I have been stuck with this code for almost a day. :smiling_face_with_tear:

2 Likes