Abbiamo parlato di "Perché Ems?" qui prima.
Per i nuovi valori em, Mozilla Developer Network fa un ottimo lavoro nello spiegare ems:
... un em è uguale alla dimensione del carattere che si applica al genitore dell'elemento in questione. Se non hai impostato la dimensione del carattere in qualsiasi punto della pagina, allora è l'impostazione predefinita del browser, che probabilmente è 16px. Quindi, per impostazione predefinita 1em = 16px e 2em = 32px.
Se preferisci ancora pensare in px, ma ti piacciono i vantaggi di em, non è necessario avere la calcolatrice a portata di mano, puoi lasciare che Sass faccia il lavoro per te. Esistono diversi modi per calcolare gli ems con Sass.
Matematica in linea:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Nota: abbiamo bisogno di "* 1em" per Sass per aggiungere correttamente il valore unitario. Puoi anche usare "+ 0em" per lo stesso scopo.
Risultato:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Funziona, ma possiamo renderlo più semplice.
La funzione em () Sass
Ci sono diversi modi per scrivere questa funzione, questo da un articolo di Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super intelligente! Questa funzione utilizza l'interpolazione delle stringhe di Sass per aggiungerle al valore. Nota che il parametro $ context ha un valore predefinito di $ browser-context (quindi, qualunque cosa tu abbia impostato questa variabile). Ciò significa che quando chiami la funzione nel tuo Sass, devi solo definire il $pixelsvalore e la matematica verrà calcolata in relazione a $browser-context- in questo caso - 16px.
Utilizzo di esempio:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Risultato:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Una funzione simile che utilizza la matematica anziché l'interpolazione di stringhe da The Sass Way può essere facilmente modificata per accettare variabili come la nostra funzione di interpolazione di stringhe:
//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; )Un altro che utilizza il metodo unitless () di Sass:
$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; )Questo ci permette di includere o meno l'unità px nella chiamata di funzione.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )