带有整数和小数的 Sass 控制指令 @for

Question

我想为 CSS 类选择器添加整数和小数的后缀，并将该值作为百分比传递。

例如：

.percentage-100 将有一个 width 或 100% - 这是可行的。

.percentage-50.5 的宽度为 width 的 50.5% - 这不起作用。

也就是说，我的 Sass 控制指令尊重整数并分配值而不是小数。

我可以从 Sass 专家那里获得一些见解，了解这个公式目前有什么问题，

@for $i from 0 through 100 {
    .percentage-#{$i} {
        &:after {
            $value: ($i * 1%);
            width: $value;
        }
    }
}

再次感谢您的宝贵时间。

Answer 1

第二个示例不起作用，因为点 .percentage-50.5 链接了两个类：.percentage-50 和 .5。

其次，类不能以数字开头，因此.5 是无效的类名。更多关于有效类名here。点不能用于表示任何类中的十进制值。您应该将第二个点替换为下划线或连字符。