Question

使用SASS'if()功能，是否可以检查属性值？例如。我希望button默认拥有margin-right: 10px。但是，如果按钮为float: right，我希望保证金为margin-left: 10px。

如下所示：

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

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

Answer 1

这个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;
}

Sassmeister demo。

Answer 2

自从我做了任何css之后已经有一段时间了，所以这可能很少，但你可以试试

.buttonClass {

    @if $float == "right" {

        $margin-left;
    } @else {

        $margin-right;
    }

}

SASS if功能检查属性值

2 个答案: