Comment régler la hauteur de ligne sur la taille de police plus la valeur fixe pour le projet entier

Question

Je dois ajuster les hauteurs de ligne pour un projet existant entier. La spécification est que toutes les hauteurs de ligne doivent être la taille de la police + 4px.

Existe-t-il un moyen simple d'accomplir cela en utilisant scss?

Ajustement basé sur le pourcentage serait simple, mais la valeur fixe me rejette.

Aussi je serais en mesure de définir globalement sans avoir à définir cela pour chaque classe où la taille de police est modifiée.

Answer 1

Oui, il y a plusieurs façons de le faire:

1. $fontSize est une valeur statique définie dans px:

$fontSize: 12px; 

$lineHeight: $fontSize + 4; 

2. votre font-size La valeur est dynamique et doit être calculée au moment de l'exécution:

line-height: calc(1em + 4x); 

---

exemple en utilisant calc;

p { 
 
    font-size: 14px; background: yellow; 
 
} 
 

 
.lh { 
 
    line-height: calc(1em + 4px); 
 
}

<p class="lh">Hello World</p>