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

Question

Sass提供了一个percentage()函数用于将无单位的数字转换为百分比，但我找不到一个反过来实现的函数（百分比转小数）。

我正在使用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文档和Compass参考文献中寻找解决方案，知道肯定有一种方法可以做到这一点。

- Beau Smith

Answer 1

您可以使用Sass数学函数将百分比转换为小数值，方法是将该百分比除以100%。

当您将一个百分比除以另一个百分比时，结果将是一个小数。

Sass代码：

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

编译成 CSS：

.foo { opacity: 0.44; }

- Beau Smith

Answer 2

虽然SASS没有提供内置函数来完成这个功能，但是你可以添加自定义函数来执行转换。看一下percentage()函数的源代码，我尝试写了一个decimal()函数：

def decimal(value)
  unless value.is_a?(Sass::Script::Number) && value.unit_str == "%"
    raise ArgumentError.new("#{value.inspect} is not a percent")
  end
  Sass::Script::Number.new(value.value / 100.0)
end

- Rhysyngsun

---

感谢Rhysyngsun！我编辑了你的解决方案，使用“100.0”而不是“100”，以确保结果为浮点数。测试过了，效果符合预期。 - Beau Smith

Answer 3

这是@Rhysyngsun的Ruby脚本，作为一个SCSS函数：

@function decimal($v) {
    @if (type_of($v) != number OR unit($v) != "%") {
        @error "decimal: `#{$v}` is not a percent";
    }
    @return $v / 100%;
}

- chpio