使用Sass,如何将百分比转换为小数？

Question

Sass有一个百分比()函数可以将无单位数转换为百分比,但是找不到反转的函数(百分比到十进制)

我使用Sass lightness()方法获得色调百分比.我想将此百分比转换为十进制值,以用于指定rgba()颜色的透明度.

这是一个无法编译的SCSS示例,因为$transparent-color需要一个小$alpha数值,而不是百分比.

$color: hsl(50deg, 50%, 50%);
$alpha: lightness($color);
$transparent-color: rgba(0,0,0,$alpha);
.foo { background: $transparent-color }

我一直在寻找Sass文档和指南针参考中的解决方案,并且知道必须有一种方法可以做到这一点.

Answer 1

您可以使用Sass数学通过除以百分比将百分比转换为十进制值100%.

将百分比除以百分比时,结果为小数.

Sass代码:

$percent: 44%
.foo
  opacity: $percent / 100%

编译为CSS:

.foo { opacity: 0.44; }