Question

我正在使用@for创建多个box-shadow参数：

.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

方法＃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};
}

Answer 2

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

.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

如何在没有额外逗号的情况下使用循环创建逗号分隔值？

2 个答案: