用于检查属性值的SASS if函数

使用SASS'

if（）

函数，是否可以检查属性值？例如，我希望

按钮

在默认情况下具有

右边距：10px

。但是，如果按钮是

float:right

，我希望边距是

margin left:10px

如下所示：

margin: if(float=="right" $margin-right $margin-left);

---

显然，上述方法不起作用（否则我就不会在这里写作）。但是，这可能吗？

我已经有一段时间没有做任何css的东西了，所以这可能会少一些，但你可以试试

.buttonClass {

    @if $float == "right" {

        $margin-left;
    } @else {

        $margin-right;
    }

}

---

此mixin可以为任何元素设置浮点和边距属性

@mixin set-button($float: null) {
  @if ($float == right) or ($float == left) {
    float: $float; 
  }

  @if ($float == right) {
    margin-left: 10px;
  } @else {
    margin-right: 10px; // default value
  }
}

.but-1 {
  @include set-button(right);
}

.but-2 {
  @include set-button();
}

.but-3 {
  @include set-button(left);
}

.but-4 {
  @include set-button(lol);
}

Css输出：

.but-1 {
  float: right;
  margin-left: 10px;
}

.but-2 {
  margin-right: 10px;
}

.but-3 {
  float: left;
  margin-right: 10px;
}

.but-4 {
  margin-right: 10px;
}

---

sassmiter.

在任何预处理器的帮助下都无法获取css属性的值。但您可以创建mixin来获取浮点值并设置边距。您可以使用占位符优化输出