SASS:如何忽略循环

big*_*ile 3 css arrays sass

我有两个 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;
}
Run Code Online (Sandbox Code Playgroud)


我已采取的步骤:

我尝试将与 object_options 相关的所有代码包装在@if $object_options != null. 这是可行的,但是当$object_options应该使用时,该函数只会循环遍历$object_options数组中的最后一项。


代码示例

(*) 这是我的代码的精简版本。完整的示例可以在这里找到:

完整版没用过@if $object_options != null

更新版本@if $object_options != null

**预期输出**(这是基于上面链接的代码的完整版本)

http://pastebin.com/gVykec8X

基本上,$color_options 和 $object_options 内部都有 5 个元素。SCSS 代码从 $color_options 和 $object_options 中获取元素并将它们组合起来。但是,如果 $object_options 设置为 null,则不会有任何组合,并且仅使用 $color_options 中的元素。

JAr*_*Are 5

sass 不支持 break 或 continue 语句。您应该使用@if它来实现分支。

  • sass 的首席开发人员认为这不是循环的基础,因为它不是“成熟的编程语言”。我认为这很荒谬。 (3认同)