Rozmawialiśmy o „Why Ems?” tu wcześniej.
Dla tych, którzy dopiero zaczynają przygodę z em, The Mozilla Developer Network doskonale wyjaśnia, czym są:
… Em jest równy rozmiarowi czcionki stosowanej do rodzica danego elementu. Jeśli nie ustawiłeś rozmiaru czcionki w żadnym miejscu na stronie, jest to domyślny rozmiar przeglądarki, który prawdopodobnie wynosi 16 pikseli. Tak więc domyślnie 1em = 16px, a 2em = 32px.
Jeśli nadal wolisz myśleć w pikselach, ale podoba Ci się ich zalety, nie musisz mieć pod ręką kalkulatora, możesz pozwolić Sassowi wykonać pracę za Ciebie. Istnieje wiele sposobów obliczania ems za pomocą Sassa.
Matematyka w wierszu:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )
Uwaga: potrzebujemy „* 1em”, aby Sass mógł poprawnie dodać wartość jednostki. W tym samym celu możesz również użyć „+ 0em”.
Wynik:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )
To działa, ale możemy to ułatwić.
Funkcja em () Sass
Istnieje kilka różnych sposobów zapisania tej funkcji, ten z artykułu Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )
Super sprytnie! Ta funkcja używa interpolacji ciągów Sassa, aby dołączyć em do wartości. Zauważ, że parametr $ context ma domyślną wartość $ browser-context (niezależnie od tego, na jaką ustawisz tę zmienną). Oznacza to, że wywołując funkcję w Sassie wystarczy zdefiniować $pixels
wartość, a matematyka zostanie obliczona względem $browser-context
- w tym przypadku - 16px.
Przykładowe zastosowanie:
h1 ( font-size: em(32); ) p ( font-size: em(14); )
Wynik:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )
Podobną funkcję używającą matematyki zamiast interpolacji ciągów z The Sass Way można łatwo zmodyfikować, aby akceptowała zmienne, takie jak nasza funkcja interpolacji ciągów:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )
Inny wykorzystujący metodę unitless () Sassa:
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )
To pozwala nam uwzględnić jednostkę px lub nie w wywołaniu funkcji.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )