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

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<style type='text/scss'>



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

  @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;
  }
}

</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/111.0.0.0 Safari/537.36

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

Link to the challenge:

To put it simply, a mixin is a code block which allows you to write your styles in it and use it throughout the whole project . You can also think of it as a reusable component. It also helps you to write cleaner code without having to repeat yourself.

You should delete the @include border-stroke(medium);. You don’t need it anymore because you have defined the rule for border-stroke for the @box selector in @mixin.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.