CODEWITHSUNDEEP
csssass
Alif
Alif

Reputation: 93

Compile error with SCSS if-else statement

I have made a condition in scss but when I compile, the result cannot appear in css file, I hope anyone can help me to solve my problem, I put code in the bellow :

$color-sp: color-sp;
$width: 100%;

@for $i from 1 through 2 {
  @if $color-sp == 1 {
    .#{$color-sp}-#{$i} {
       width: $width / 1;
    }
  } @else if $color-sp == 2 {
    .#{$color-sp}-#{$i} {
       width: $width / 2;
     }
  }
}

Upvotes: 0

Views: 72

Answers (1)

user10014185
user10014185

Reputation:

I think you have to put if condition on $i instead of $color-sp. Check below code it will produce two classes . try it on https://www.sassmeister.com/ 

$color-sp: color-sp;
$width: 100%;

@for $i from 1 through 2 {
  @if $i == 1 {
    .#{$color-sp}-#{$i} {
       width: $width / 1;
    }
  } @else if $i == 2 {
    .#{$color-sp}-#{$i} {
       width: $width / 2;
     }
  }
}

And more optimized code for creating classes is below:

$color-sp: color-sp;
$width: 100%;

@for $i from 1 through 2 {
  .#{$color-sp}-#{$i} {
       width: $width / $i;
    }
}

Upvotes: 2

Related Questions