2011-08-24 12 views
10

Sass ma percentage() function przekonwertować liczbę niemianowana do odsetek, ale nie mogę znaleźć funkcji, aby zrobić na odwrót (procent na dziesiętne)Sas, jak przekonwertować procent na dziesiętny?

Używam Sass lightness() method dostać procent odcień. Chcę to przekonwertować ten procent na wartość dziesiętną, aby użyć do określenia przezroczystości koloru rgba().

Oto przykład SCSS, którego nie można skompilować, ponieważ $transparent-color wymaga wartości $alpha, która jest dziesiętna, a nie procent.

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

Szukałem rozwiązań w Sass Documentation i Compass Reference i wiem, że musi być jakiś sposób, aby to zrobić.

Odpowiedz

27

Można użyć Sass matematyki przekonwertować procent do wartości dziesiętnych przez podzielenie procentu przez 100%.

Po podzieleniu wartości procentowej na procent, wynik jest dziesiętny.

kod Sass:

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

kompilowany do CSS:

.foo { opacity: 0.44; } 
2

Podczas gdy SASS nie zapewnia tej funkcji jako wbudowanej funkcji, z pewnością można wykonać konwersję w celu przeprowadzenia add a custom function. Biorąc spojrzeć na źródło procent(), wziąłem ukłucie, co funkcja dziesiętny() wyglądałby następująco:

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

Dzięki Rhysyngsun! Zmieniłem twoje rozwiązanie, aby używał "100.0" zamiast "100", aby zapewnić, że wynik będzie zmienny. Testowane i działa zgodnie z oczekiwaniami. –

Powiązane problemy