html - 在 sas mixins 上工作以根据 margin 位置附加值

Question

您好，我正在编写一个 mixin，我想根据边距位置附加值我已经走了很远，但不确定如何前进。

@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;
}

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