在 Sass 中打破 @while 的小数位

Question

尝试创建一些 classes 以使用以下代码定义不透明度：

$i : 0;
@while $i <= 1 {
  .opacity-#{$i*100} {
    opacity: $i !important;
  }
  $i : $i + 0.1;
}

但我收到以下错误：

“.opacity-30.”后的 CSS 无效：应为 class 名称，为“0”

好像是在 while 之后添加了一个句点...不确定是什么原因造成的。

使用 Sass 3.4.14

使用罗盘

有什么想法吗？

谢谢！

Answer 1

您似乎需要将 class 名称中的数字四舍五入：如果您打印 /* #{$i*100} */，编译器将同时计算 30.0、90.0 和 100.0

因此您可以使用 round() 函数 (reference) 去除任何小数

$i : 0;
@while $i <= 1 {

   /* #{$i*100} */
  .opacity-#{round($i*100)} {
    opacity: $i !important;
  }

  $i : $i + 0.1;
}

结果输出（在 sassmeister 上测试）是

/* 0 */
.opacity-0 { opacity: 0 !important; }

/* 10 */
.opacity-10 { opacity: 0.1 !important; }

/* 20 */
.opacity-20 { opacity: 0.2 !important; }

/* 30.0 */
.opacity-30 { opacity: 0.3 !important; }

/* 40 */
.opacity-40 { opacity: 0.4 !important; }

/* 50 */
.opacity-50 { opacity: 0.5 !important; }

/* 60 */
.opacity-60 { opacity: 0.6 !important; }

/* 70 */
.opacity-70 { opacity: 0.7 !important; }

/* 80 */
.opacity-80 { opacity: 0.8 !important; }

/* 90.0 */
.opacity-90 { opacity: 0.9 !important; }

/* 100.0 */
.opacity-100 { opacity: 1.0 !important; }

在 Sass 中打破 @while 的小数位

Decimal places breaking @while in Sass

sass

compass-sass