使用萨斯，如何转换的百分比，以十进制？

Question

Sass有percentage() function为无单位数字转换为百分比，但我不能找到一个函数来完成反向（百分比为十进制）

我现在用的是萨斯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

您可以使用萨斯数学除以100%百分比为百分比转换为十进制值。

当你按百分比划分比例，结果是一个小数。

萨斯代码：

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

编译成CSS：

.foo { opacity: 0.44; }

Answer 2

虽然SASS不提供此作为一个内置的功能，你可以肯定add a custom function来执行转换。在源百分比（）拍摄一看，我参加了一个刺在什么十进制（）函数将如下所示：

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