Mixin：动态添加属性

Question

使用 Mixin，我想确定两个条目之间的值并将其添加到特定的属性。这是一个虚拟示例：

@mixin min($property, $min1, $min2) {
  @if ($min1 > $min2) {
    $property: $min2;
  }
  @else {
    $property: $min1;
  }
}

.test {
  @include min(width, 11px, 13px);
}

.test1 {
  @include min(background-size, 30px, 13px);
}

.test2 {
  @include min(height, 8px, 50px);
}

我想要输出：

width: 11px;

background-size: 13px;

height: 8px;

问题是 $property: $min1; 将 min1 值设置为 property，我想 return 一个文字。

我如何使用 mixin 做到这一点？

Answer 1

你快到了。您必须在 $property 变量上使用 interpolation：

@mixin min($property, $min1, $min2) {
  @if ($min1 > $min2) {
    #{$property}: $min2;
  }
  @else {
    #{$property}: $min1;
  }
}

Mixin：动态添加属性

Mixin: Add property dynamically

css

sass

scss-mixins