我有两个 SCSS 数组($color_options
和 $object_options
)。
我想使用 SCSS 循环遍历两个数组以组合它们的值。
我已经创建了一个函数来执行此操作,并且一切正常。但是,有时我只想遍历颜色数组而忽略对象数组。我该怎么做?
这是我的代码(*):
@function generic-avatar-hidden($color_options: $color_options, $object_options: $object_options) {
$bg: compact();
@each $ov in $object_options {
$o-css-selector: nth($ov, 1);
@each $cv in $color_options {
$c-css-selector: nth($cv, 1);
$assetname: $o-css-selector + $c-css-selector;
$bg: join($bg, image-url("#{$root-directory}/#{$brand}/#{$product}/#{$type}/#{$product}-#{$type}-#{$path-pre}#{$assetname}#{$path-post}.#{$ext}"), comma);
}
// Close CV
}
// Close OV
@return $bg;
}
我采取的步骤:
我已经尝试将所有与 object_options 相关的代码包装在 @if $object_options != null
中。
这行得通,但是当应该使用 $object_options
时,该函数将只循环遍历 $object_options
数组中的最后一项。
代码示例
(*) 这是我的代码的精简版。完整的例子可以在这里找到:
Full version不使用 @if $object_options != null
Updated version使用 @if $object_options != null
**预期输出** (这是基于上面链接的代码的完整版本)
基本上,$color_options 和 $object_options 里面都有 5 个元素。 SCSS 代码从 $color_options 和 $object_options 中获取元素并将它们组合起来。但是,如果 $object_options 设置为 null,则不会有任何组合,只会使用 $color_options 中的元素。
最佳答案
sass doesn't support break or continue statements .您应该使用 @if
来实现分支。
关于css - SASS:如何忽略循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23650516/