Mēs esam runājuši par “Kāpēc Ems?” šeit iepriekš.
Tiem, kas jauni em vērtībām, Mozilla Developer Network lieliski izskaidro ems:
... em ir vienāds ar fonta lielumu, kas attiecas uz attiecīgā elementa vecāku. Ja nekur lapā neesat iestatījis fonta lielumu, tas ir pārlūka noklusējums, kas, iespējams, ir 16 pikseļi. Tātad pēc noklusējuma 1em = 16px un 2em = 32px.
Ja jūs joprojām vēlaties domāt px, bet tāpat kā em priekšrocības, kalkulators nav ērti, jūs varat ļaut Sass darīt darbu jūsu vietā. Ir dažādi veidi, kā aprēķināt ems ar Sass.
Iekļautā matemātika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Piezīme: Mums ir nepieciešams “* 1em”, lai Sass pareizi pievienotu vienības vērtību. Tajā pašā nolūkā varat izmantot arī “+ 0em”.
Rezultāts:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Tas darbojas, bet mēs varam to padarīt vieglāku.
Em () Sass funkcija
Ir diezgan daudz dažādu veidu, kā rakstīt šo funkciju, šo no Web Design Weekly raksta:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super gudri! Šī funkcija izmanto Sass virkņu interpolāciju, lai pievienotu vērtību vērtībai. Ņemiet vērā, ka parametram $ context noklusējuma vērtība ir $ browser-context (tātad neatkarīgi no tā, kā iestatāt šo mainīgo uz). Tas nozīmē, ka, izsaucot funkciju savā Sass, jums ir jādefinē tikai $pixelsvērtība, un matemātika tiks aprēķināta attiecībā pret $browser-context- šajā gadījumā - 16 pikseļiem.
Lietojuma piemērs:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Rezultāts:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Līdzīgu funkciju, izmantojot matemātiku, nevis virkņu interpolāciju no The Sass Way, var viegli pārveidot, lai pieņemtu tādus mainīgos kā mūsu virkņu interpolācijas funkcija:
//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; )Cits, izmantojot Sass metodi unitless ():
$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; )Tas ļauj vai nu iekļaut px vienību, vai arī neiekļaut to funkciju izsaukumā.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )