Question

Sass有一个percentage() function可以将无单位数字转换为百分比，但我找不到反向执行的函数（百分比到十进制）

我使用Sass lightness() method来获得色调百分比。我想将此百分比转换为十进制值，以用于指定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 Documentation和Compass Reference寻找解决方案，并知道必须有办法解决这个问题。

Answer 1

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

按百分比划分百分比时，结果为小数。

Sass代码：

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

编译为CSS：

.foo { opacity: 0.44; }

Answer 2

虽然SASS不提供此功能作为内置功能，但您当然可以add a custom function执行转换。看一下百分比（）的来源，我看了一下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

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%;
}

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

3 个答案: