在SASS中创建用于@for循环的集合(数组)-Createacollection(array)inSASSforusein@forloop

17  

The closest thing SASS has to an array is a list, which you can iterate with the @each directive, like so:

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

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html每个指示

I've used string interpolation to drop the value of the list entry into the rule itself - I'm not entirely sure that's legal, but I'm not on my dev. machine to check.

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

I've also used default values on the arguments, which means you can pass in a custom radius. If you do pass in any corner in the list, you'll clear the whole default list (which I think is what you want, but something to be aware of).

我还对参数使用了默认值，这意味着您可以传递自定义的半径。如果您在列表中的任何一个角落都通过了，您将会清除整个默认列表(我认为这是您想要的，但是需要注意的是)。

A different, simpler way to do this might be:

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

@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

By setting defaults, you can call this mixin like:

通过设置默认值，您可以将这个mixin称为:

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

Using 'false' instead of 0 as the default means you don't create more radius rules than you need. It also means you can override and set corners back to 0 radius if you need to.

使用“false”而不是0作为默认值意味着您不会创建超出所需的范围规则。它还意味着如果需要的话，您可以重写并将弯角设置为0半径。

6  

This is how I solved it and allow you to set different radius.

我就是这样解出来的，允许你设置不同的半径。

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

Which means you can set all the radius the same:

也就是说你可以把所有的半径设为相同的:

@include border-radius(5px)

or different like this:

或不同的是这样的:

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

Hopefully keep your generated CSS succinct too :)

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

3  

Using the code provided by @Beejamin I was able to devise the following solution after fixing some syntax issues.

使用@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);

I however prefer his final solution which allows me to assign different radii to each corner.

但是我更喜欢他的最终解决方案，它允许我给每个角落分配不同的半径。