Question

我已经在scss中创建了一个条件，但是当我编译时，结果不能出现在css文件中，我希望有人能帮助我解决我的问题，我将代码放在下面： / p>

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

使用SCSS if-else语句编译错误

1 个答案: