如何使用循环来创建一个逗号分隔值，而不需要在末尾添加一个逗号？

Question

我使用@for创建多个框影参数：

.myclass {

    $bxsw : "";
    @for $i from 1 through 10 {
      $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ",";
    }

    box-shadow: #{$bxsw};

}

这给了我：

.myclass {
    box-shadow: -1px -1px brown, -2px -2px brown, -3px -3px brown, -4px -4px brown, -5px -5px brown, -6px -6px brown, -7px -7px brown, -8px -8px brown, -9px -9px brown, -10px -10px brown,;
}

注意到最后加的逗号了吗？这导致Firefox不呈现框影。是否有可编程的方式删除最后一个逗号？

Answer 1

最简单的方法是附加到逗号分隔列表。

.myclass {
    $bxsw : ();
    @for $i from 1 through 10 {
      $bxsw : append($bxsw, $i * -1px $i * -1px brown, comma);
    }

    box-shadow: $bxsw;
}

http://sassmeister.com/gist/7b8221953c7ca9813aea

Answer 2

方法#1: --一个选项是为$bxsw设置一个基值，然后从2迭代循环

.myclass {
    $bxsw : "-1px -1px brown";
    @for $i from 2 through 10 {
      $bxsw : $bxsw + ", -" + $i + "px -" + $i + "px " + brown;
    }

    box-shadow: #{$bxsw};
}

方法#2:另一个选项是检查$bxsw是否为空，以便追加逗号：

.myclass {
    $bxsw : "";
    @for $i from 1 through 10 {
      @if ($bxsw != "") { $bxsw: $bxsw + ", "; }
      $bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown;
    }

    box-shadow: #{$bxsw};
}

方法#3:，也可以检查当前的迭代次数是否是最后一个迭代次数：

.myclass {
    $bxsw: ""; $from: 1; $to: 10;

    @for $i from $from through $to {
      $bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown;
      @if ($i < $to) { $bxsw: $bxsw + ", "; }
    }

    box-shadow: #{$bxsw};
}