2011-08-24 7 views
10

Sass ha un percentage() function per convertire un numero senza unità per una percentuale, ma non riesco a trovare una funzione per fare il contrario (percentuale in decimale)Usando Sass, come convertire una percentuale in un decimale?

Sto usando il Sass lightness() method per ottenere la percentuale di tonalità. Voglio convertire questa percentuale in un valore decimale da utilizzare per specificare la trasparenza di un colore rgba().

Ecco un esempio SCSS che non riuscirà a compilare perché $transparent-color richiede un valore $alpha che è un decimale, non una percentuale.

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

Ho cercato per soluzioni nel Sass Documentation e la Compass Reference e so che ci deve essere un modo per fare questo.

risposta

27

È possibile utilizzare Sass matematica per convertire una percentuale ad un valore decimale dividendo la percentuale di 100%.

Quando si divide una percentuale di una percentuale, il risultato è un decimale.

codice Sass:

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

Redatto ai CSS:

.foo { opacity: 0.44; } 
2

Mentre SASS non fornisce questa funzione incorporata, è possibile eseguire la conversione con add a custom function. Dando uno sguardo alla fonte per la percentuale(), ho preso una pugnalata a quello di una funzione decimale() sarebbe simile:

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 
+1

Grazie Rhysyngsun! Ho modificato la tua soluzione per utilizzare "100.0" anziché "100" per garantire che il risultato fosse un float. Testato e funziona come previsto. –