Am vorbit despre „De ce Ems?” aici înainte.
Pentru cei noi în valorile em, Rețeaua de dezvoltatori Mozilla face o treabă excelentă de a explica ems:
… Un em este egal cu dimensiunea fontului care se aplică părintelui elementului în cauză. Dacă nu ați setat dimensiunea fontului nicăieri pe pagină, atunci este implicit browserul, care este probabil de 16 px. Deci, în mod implicit 1em = 16px și 2em = 32px.
Dacă totuși preferați să vă gândiți la px, dar, ca și beneficiile em, nu este nevoie să aveți calculatorul la îndemână, puteți să-l lăsați pe Sass să facă treaba pentru dvs. Există o varietate de moduri de a calcula ems-urile cu Sass.
Matematică în linie:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Notă: Avem nevoie de „* 1em” acolo pentru ca Sass să adauge corect valoarea unității. De asemenea, puteți utiliza „+ 0em” în același scop.
Rezultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Acest lucru funcționează, dar îl putem ușura.
Funcția em () Sass
Există destul de multe moduri diferite de a scrie această funcție, aceasta dintr-un articol săptămânal de design web:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super inteligent! Această funcție folosește interpolarea șirului Sass pentru a adăuga em la valoare. Rețineți că parametrul $ context are o valoare implicită de $ browser-context (deci, oricare ar fi setarea acestei variabile). Aceasta înseamnă că atunci când apelați funcția în Sass, trebuie doar să definiți $pixelsvaloarea, iar matematica va fi calculată relativ la $browser-context- în acest caz - 16 px.
Exemplu de utilizare:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Rezultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )O funcție similară care folosește matematică în loc de interpolare de șiruri din The Sass Way poate fi ușor modificată pentru a accepta variabile precum funcția noastră de interpolare de șiruri:
//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; )O altă metodă care folosește Sass '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; )Acest lucru ne permite fie să includem unitatea px, fie nu în apelul de funcție.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )