css - 生成带小数的类名

我想创建一个类，如.rating-1-1 {} 、. rating-1-2 {}，直到10.0。 1-1表示1.1。我想用-代替小数点的地方。在我当前的实现中，它生成为.rating-1.1，.rating-1.2，此类不适用于css样式。

尝试代码

@iterations: 10;
.rate-loop (@i) when (@i > 0) {
    .rate-@{i} {
        width: percentage((@i / @iterations));
    }
    .rate-loop(@i - 0.1);
}
.rate-loop (@iterations);

最佳答案

使用简单的算术和numeric functions，例如：

.loop(3);
.loop (@n, @j: @n) when (@j > 0) {
    .loop(@j, @j - 1/10);
    @i: floor(@j);            // integer part
    @f: floor(mod(@j, 1)*10); // fractional part
    .foo-@{i}-@{f} {
        width: 10% * @j;
    }
}

这将生成从foo-0-0到foo-3-0的类。

Demo。



如果数字转换不适用，请使用replace

关于css - 生成带小数的类名，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49551530/