Petite fonction en SASS pour modifier à la volée PX en EM

Attention ! Cet article a plus de 1 an (770 jours), ce qui signifie qu'il n'est pas forcément à jour !

Il m’arrive constamment de recevoir des maquettes avec les polices en PX. Ceci est bien normal vous me direz, c’est effectivement le cas. Cependant, quand arrive le temps d’intégrer cela et de devoir les ajuster en EM, c’est beaucoup plus problématique.

Il existe plusieurs sites qui vous font la conversions. Ou tout au plus, on peut faire le calcul suivant : la taille en px diviser par notre taille  de base et voilà le résultat. Mais avec l’aide de SASS j’ai fait une petite function qui me permet de sauver beaucoup de temps.

@function em($px, $base: $base-font-size) {
    @return ($px / $base) * 1em;
}

Cette function toute simple me permet d’avoir une variable $base-font-size qui va faire changer partout les PX enEM et les ajuster selon la taille de la police de base.

L’utilisation est des plus simple. On doit déclarer la variable et ensuite l’utiliser ainsi.

$base-font-size: 16px; 
body {font-size:$base-font-size;}
h1 {font-size: em(48px);}

Catégories :

HTML CSS

Commentaires

  • Rjean

    Wow super cette petite fonction.

    • René

      MErci

  • cokpit

    C’est clair que moi aussi je vais l’utiliser.

  • Charles

    Très utile

Ajouter un commentaire

Vous devez entrer votre nom.
Vous devez entrer votre courriel.
Un commentaire est nécessaire.
Le captcha est nécessaire.