If statement 使用变量名的SASS@if语句

我在使用基于变量的@if语句生成正确代码时遇到问题

无礼

产生

    .band-white{background-color:white; font-size:100px;}
    .band-black{background-color:black; font-size:50px;}

---

我怀疑这是一个空白问题。日志里有什么有用的东西吗

我能够使您的代码版本正常工作：

@mixin band($name) 
  background-color: $name 
  @if $name == white
    font-size: 50px
  @else 
    font-size: 20px

.band-white
  @include band($name: white)

.band-black
  @include band($name: black)

---

您可以看到它在这里工作

问题是您的mixin正在将输入的变量与颜色进行比较

您正在传入字符串

'white'

，该字符串与HTML颜色

white

不同

看一看这张照片

因此，要修复Sass，您必须将代码更改为

=band($name, $color)
  .band-#{$name}
    background-color: #{$color}
    @if $name == 'white'
      font-size: 100px
    @else
      font-size: 20px

+band('white', $white)
+band('black', $black)

或

如果您将颜色以外的任何内容作为第一个参数传递，则后者将不会提供任何有用的内容

顺便说一句，如果您使用的是Sass 3.3或更高版本，您还可以通过使用单行来简化条件：

---

font-size:if（$name==white，100px，20px）

这与@brad试图实现的目标完全不同。@PatrikAffentranger是的，也许我应该问一下传递的冗余参数背后的原因。然而，结果（编译的CSS）正是OP所追求的，并且是在一个不那么冗长的庄园中实现的。因此，我认为没有理由投反对票。在我看来，结果是不同的，因为@brad希望能够根据第一个参数自动生成类名。这不同于把它们写出来，然后只为背景色使用mixin。是的，好的，很公平。对不起，我在最初的评论中应该说得更清楚。

=band($name, $color)
  .band-#{$name}
    background-color: #{$color}
    @if $name == 'white'
      font-size: 100px
    @else
      font-size: 20px

+band('white', $white)
+band('black', $black)

=band($name, $color)
  .band-#{$name}
    background-color: #{$color}
    @if $name == white
      font-size: 100px
    @else
      font-size: 20px

+band(white, $white)
+band(black, $black)