Ошибка компиляции с оператором S CSS if-else

Question

Я сделал условие в scss, но когда я компилирую, результат не может появиться в файле css, я надеюсь, что кто-нибудь может помочь мне решить мою проблему, я поставил код ниже:

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

Answer 1

Я думаю, вы должны поставить , если условие на $ i вместо $ color-sp . Проверьте ниже код, он будет производить два класса. попробуйте это на 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;
     }
  }
}  

А более оптимизированный код для создания классов приведен ниже:

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

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