Question

Sass has a percentage() function to convert a unitless number to a percentage but I cannot find a function to do the reverse (percentage to decimal)

I am using the Sass lightness() method to get the hue percentage. I this want to convert this percentage to a decimal value to use in specifying the transparency of a rgba() color.

Here’s a SCSS example which will fail to compile because $transparent-color requires an $alpha value which is a decimal, not a percentage.

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

I’ve been looking for solutions in the Sass Documentation and the Compass Reference and know there must be a way to do this.

Answer 1

You can use Sass math to convert a percentage to a decimal value by dividing the percentage by 100%.

When you divide a percentage by a percentage, the result is a decimal.

Sass code:

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

Compiled to CSS:

.foo { opacity: 0.44; }