Nous avons parlé de «Pourquoi Ems?» ici avant.
Pour ces nouvelles valeurs em, le Mozilla Developer Network fait un excellent travail pour expliquer les ems:
… Un em est égal à la taille de la police qui s'applique au parent de l'élément en question. Si vous n'avez défini la taille de la police nulle part sur la page, il s'agit de la taille par défaut du navigateur, qui est probablement 16px. Donc, par défaut 1em = 16px et 2em = 32px.
Si vous préférez toujours penser en px, mais que vous aimez les avantages d'em, vous n'avez pas besoin d'avoir votre calculatrice à portée de main, vous pouvez laisser Sass faire le travail pour vous. Il existe plusieurs façons de calculer les ems avec Sass.
Mathématiques en ligne:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Remarque: nous avons besoin du «* 1em» pour que Sass ajoute correctement la valeur unitaire. Vous pouvez également utiliser «+ 0em» dans le même but.
Résultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Cela fonctionne, mais nous pouvons vous faciliter la tâche.
La fonction em () Sass
Il existe plusieurs façons d'écrire cette fonction, celle-ci à partir d'un article Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super intelligent! Cette fonction utilise l'interpolation de chaîne de Sass pour les ajouter à la valeur. Notez que le paramètre $ context a une valeur par défaut de $ browser-context (donc, peu importe ce que vous définissez cette variable). Cela signifie que lors de l'appel de la fonction dans votre Sass, il vous suffit de définir la $pixelsvaleur et le calcul sera calculé par rapport à $browser-context- dans ce cas - 16px.
Exemple d'utilisation:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Résultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Une fonction similaire utilisant les mathématiques au lieu de l'interpolation de chaîne de The Sass Way peut facilement être modifiée pour accepter des variables comme notre fonction d'interpolation de chaîne:
//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 autre utilisant la méthode unitless () de 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; )Cela nous permet d'inclure ou non l'unité px dans l'appel de fonction.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )