Using Sass, how to convert a percentage to a decimal?

css sass compass-sass
Beau Smith picture Beau Smith · Aug 24, 2011 · Viewed 8.2k times · Source

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

Beau Smith picture Beau Smith · Aug 24, 2011

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

Related questions

SASS :not selector

I have a :not css selector in SASS mixin but it doesn't do anything: Code Snippet: @mixin dropdown-pos($pos:right) { &:not(.notip) { @if $comp-tip == true{ @if $pos == right { top:$dropdown-width * -0.6; @include tip($pos:$pos); } } } &.notip { @if $pos == …

Read More
Sass Background Image mixin

I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do …

Read More
Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency: @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include …

Read More