SASS: How to ignore a loop

Question

I have two SCSS arrays ($color_options and $object_options).

I want to use SCSS to loop through both arrays to combine values from both of them.

I have created a function to do this and everything works fine. However, there are times when I want to only to loop through the colour array and ignore the object array. How can I do this?

Here is my code(*):

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

---

Steps I have taken:

I have tried wrapping all the code to do with the object_options in @if $object_options != null. This works, but when $object_options is supposed to be use, the function will only loop through the last item in the $object_options array.

---

Code Examples

(*) This is a cut down version of my code. The full examples can be found here:

Full version which doesn't use @if $object_options != null

Updated version with @if $object_options != null

**Expected Output ** (This is based on the full version of the code linked above)

http://pastebin.com/gVykec8X

Basically, $color_options & $object_options all have 5 elements inside of them. The SCSS code takes elements from $color_options and $object_options and combines them. However, if $object_options is set to null, then there will be no combination and only elements from $color_options will be used.

Answer 1

sass doesn't support break or continue statements. You should use @if to implement branching.