html - 使用 sas mixins 以根据边距位置附加值

Question

嗨，我正在编写一个 mixins，我想根据边距位置附加值我已经走了很远，这不知道如何前进。

@mixin margin ($value, $positions...){
  @each $position in $positions {
    margin-#{$position}: $value;
  }
}

.margin-top {
  @include margin(10px, top);
}
.margin-multiple {
  @include margin(10px, top, left, right);
}

在我的magin-multiple选择器中，如果我传递三个不同的值，它应该附加到各自的边距位置。例如，如果我包括@include margin(10px, 8px, 5px, top, left, right);我的预期输出如下

.margin-multiple {
   margin-top: 10px;
   margin-left: 8px;
   margin-right: 5px;
}

任何帮助，将不胜感激。

Answer 1

这个解决方案怎么样：

@mixin margin ($values, $positions) {
    @for $i from 1 through length($values) {
        margin-#{nth($positions, $i)}: nth($values, $i);
    }
}

它将列表作为参数，因此您可以这样称呼它：

.margin-multiple {
    @include margin(10px 8px 5px, top left right)
}

这导致预期的输出：

.margin-multiple {
    margin-top: 10px;
    margin-left: 8px;
    margin-right: 5px;
}

始终确保对值和位置使用相同长度的列表！