Usando Sass, ¿cómo convertir un porcentaje a un decimal?

Question

Sass tiene un percentage() function para convertir un número sin unidades a un porcentaje, pero no puedo encontrar una función para hacer a la inversa (porcentaje a decimal)

estoy usando el Sass lightness() method para obtener el porcentaje de tono. Esto quiere convertir este porcentaje a un valor decimal para usar al especificar la transparencia de un color rgba().

Aquí hay un ejemplo de SCSS que no se compilará porque $transparent-color requiere un valor $alpha que es un decimal, no un porcentaje.

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

que he estado buscando soluciones en el Sass Documentation y la Compass Reference y sé que debe haber una manera de hacer esto.

Answer 1

Puede utilizar Sass matemáticas para convertir un porcentaje de un valor decimal al dividir el porcentaje por 100%.

Cuando divide un porcentaje en un porcentaje, el resultado es un decimal.

código Sass:

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

Compilado a CSS:

.foo { opacity: 0.44; } 

Answer 2

Si bien SASS no proporciona esto como una función incorporada, sin duda podría add a custom function realizar la conversión. Echando un vistazo a la fuente de porcentaje(), tomé una puñalada en lo que es una función de decimal() se vería así:

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