css - 如何使用循环创建逗号分隔的值，而末尾没有多余的逗号？

我正在使用@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无法渲染盒子阴影。是否有一种编程的方式来删除最后一个逗号？

最佳答案

最简单的方法是将其添加到以逗号分隔的列表中。

.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

关于css - 如何使用循环创建逗号分隔的值，而末尾没有多余的逗号？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26186433/