在 SASS 中创建一个集合（数组）以在 @for 循环中使用答案

【问题标题】：Create a collection (array) in SASS for use in @for loop在 SASS 中创建一个集合（数组）以在 @for 循环中使用
【发布时间】：2011-11-15 16:51:13
【问题描述】：

我正在学习 SASS，我正在尝试将一组数据（数组）传递到 @mixin 并基于此进行处理。我遇到的麻烦是定义 数据结构 将值传递到 @mixin

这是一些伪代码：

@mixin roundcorners($collection) {

    $collectionLength = length(collection);

    @for($i from 0 to $collectionLength) {
        border-#{$collection[$i]}-radius: 9px;
    }

}

.mybox {

    @include roundcorners(['top-right','bottom-left']);

}

期望的输出是这样的：

.mybox {
    border-top-right-radius: 9px;
    border-bottom-left-radius: 9px;
}

【问题讨论】：

标签： css arrays for-loop sass

【解决方案1】：

SASS 与数组最接近的是一个列表，您可以使用 @each 指令对其进行迭代，如下所示：

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0)
   @each $corner in $collection
     border-#{$corner}-radius: $radius

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

我使用字符串插值将列表条目的值放入规则本身 - 我不完全确定这是否合法，但我不在我的开发人员中。机器检查。

我还在参数上使用了默认值，这意味着您可以传入自定义半径。如果您确实通过了列表中的任何角落，您将清除整个默认列表（我认为这是您想要的，但需要注意）。

另一种更简单的方法可能是：

@mixin rounded($topLeft:false, $topRight:false, $bottomRight:false, $bottomRight:false)
  @if $topLeft != false
     border-top-left-radius: $topLeft
  @if $topRight != false
     border-top-right-radius: $topRight
  @if $bottomRight != false
     border-bottom-right-radius: $bottomRight
  @if $topLeft != false
     border-bottom-left-radius: $topLeft

通过设置默认值，你可以像这样调用这个 mixin：

@include rounded(false, 9px, false, 9px)

使用 'false' 而不是 0 作为默认值意味着您创建的半径规则不会超出您的需要。这也意味着您可以根据需要覆盖并将拐角设置回 0 半径。

【讨论】：

谢谢！我不知道@each，比起我使用@for 的方式，我更喜欢它！您的替代解决方案似乎更适合我想做的事情，但了解集合也很好！我找了又找，只能找到说不可能的人。
谢谢伙计 - 我按照您的说明修复了插值语法。

【解决方案2】：

这就是我解决它的方法，并允许您设置不同的半径。

@mixin border-radius($radius:5px){
    @if length($radius) != 1 {
        $i:1;
        //covers older modzilla browsers
        @each $position in (topleft, topright, bottomright, bottomright) {
            -moz-border-radius-#{$position}:nth($radius, $i);
            $i:$i+1;
        }
        //Covers webkit browsers
        -webkit-border-radius:nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
        //Standard CSS3
        border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
    } @else {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        border-radius: $radius;
    }
}

这意味着您可以将所有半径设置为相同：

@include border-radius(5px)

或者像这样的不同：

@include border-radius((5px, 0, 5px, 0))

希望您生成的 CSS 也保持简洁 :)

【讨论】：

【解决方案3】：

使用@Beejamin 提供的代码，在修复了一些语法问题后，我能够设计出以下解决方案。

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0) {
    @each $corner in $collection {
        border-#{$corner}-radius: $radius
    }
}

@include roundcorners((top-right, bottom-left), 9px);

然而，我更喜欢他的最终解决方案，它允许我为每个角分配不同的半径。

【讨论】：