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

Tell us what’s happening:
Describe your issue in detail here.
i dont really know how to go abt the codes

  **Your code so far**
<style type='text/scss'>
@mixin border-stroke($val) {
@if $val == solid black {
  border: 1px;
}
@else if $val == alert {
  color: yellow;
}
@else if$val == success {
  color: green;
}

}


#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/105.0.0.0 Safari/537.36

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

Link to the challenge:

heloooo, anyone???

Hello, I saw your post but was put off because of the general frame of the question.

(The more specific the question the quicker you will get a response)

Anyway, I was wondering why you haven’t tried to follow the test description?

For eg this one:
Waiting:Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.

From what I can see you haven’t created the @if For “light” yet…

for instance, if i want to pass to second step, how exactly do i create a mixin to check if $val is light , and to set the border to 1px solid black .

i dont really understand what they want me to do, a broad explantion will do a lot

If you take a look at the exercise, you will see you were given sample code.
Here is part of that code:

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }

So you already have the first line written down correctly (as I see from the code you posted above)

So now you need an if statement just like the example one given but instead of the word danger, use the word light.
And instead of the word color use the word border.
And instead of the word red use the words “1px solid black”

So all you are doing is following the example given to you but with slightly different checks and slightly different styles.

1 Like

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