css - 如何使用循环创建一个逗号分隔的值而末尾没有额外的逗号？

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