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

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

我现在用的是萨斯lightness() method得到色调百分比。我希望将此百分比转换为十进制值以用于指定颜色的透明度。

下面是一个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解决方案，并知道必须有办法做到这一点。

来源

2011-08-24 Beau Smith

您可以通过将百分比使用萨斯数学的比例转换为十进制值通过100%。

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

萨斯代码：

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

编译到CSS：

.foo { opacity: 0.44; }

来源

2011-08-24 18:47:31

虽然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

来源

2011-08-24 02:16:32 Rhysyngsun

感谢Rhysyngsun！我编辑了你的解决方案，使用“100.0”而不是“100”来确保结果是一个浮点数。经过测试，它按预期工作。 –

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

回答

相关问题