CSS 在 SASS 中创建一个集合（数组）以在 @for 循环中使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7394405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a collection (array) in SASS for use in @for loop
提问by Ben Hull
I'm learning SASSand I'm trying to pass a collection of data (an array) into a @mixinand process based on that. The trouble I'm having is defining the data structureto pass the values into the @mixin
我正在学习SASS并且我正在尝试将一组数据（一个数组）传递到一个@mixin基于它的过程中。我遇到的麻烦是定义数据结构以将值传递到@mixin
Here's some pseudo code:
这是一些伪代码：
@mixin roundcorners($collection) {
$collectionLength = length(collection);
@for($i from 0 to $collectionLength) {
border-#{$collection[$i]}-radius: 9px;
}
}
.mybox {
@include roundcorners(['top-right','bottom-left']);
}
The desired output would be this:
所需的输出是这样的：
.mybox {
border-top-right-radius: 9px;
border-bottom-left-radius: 9px;
}
回答by Ben Hull
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#each-directive
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 半径。
回答by DJ Forth
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 也保持简洁:)
回答by DJ Forth
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.
然而，我更喜欢他的最终解决方案，它允许我为每个角分配不同的半径。
