Tailles de cas spéciales avec Foundation 6

Question

TL; DR

Quelle est la meilleure façon d'ajouter une taille de police variée par rapport aux points d'arrêt intégrés sous Foundation 6?

avec la Fondation 6 je peux ajuster la cartographie sous _settings.scss pour les six rubriques par point d'arrêt:

$header-styles: (
    small: (
    'h1': ('font-size': 39), 
    'h2': ('font-size': 28), 
    'h3': ('font-size': 22), 
    'h4': ('font-size': 19), 
    'h5': ('font-size': 16), 
    'h6': ('font-size': 15), 
), 
    medium: (
    'h1': ('font-size': 39), 
    'h2': ('font-size': 28), 
    'h3': ('font-size': 22), 
    'h4': ('font-size': 19), 
    'h5': ('font-size': 16), 
    'h6': ('font-size': 15), 
), 
); 

C'est correct pour les titres de haut niveau mais quand j'ai plusieurs h1 est sur une page dans le balisage de la structure , Je veux que les h1 dans d'autres sous-sections aient une taille de police différente. Par exemple. 19px au lieu de 39px vu ci-dessus.

<header> 
    <h1>This is 39px by default. Cool.</h1> 
</header> 
<article> 
    <h1>This should be smaller size in appearance e.g. 19px</h1> 
    <p>Both h1's should follow and scale to the breakpoints small, medium, etc.<p> 
</article> 

EDIT:

J'ai appris que je peux ajouter un nom de classe à la liste et il fonctionne, mais cela semble être une mauvaise façon de le faire et il prend la h1 secondaire toujours ont la .special de classe:

$header-styles: (
    small: (
    'h1': ('font-size': 39), 
    'h2': ('font-size': 28), 
    'h3': ('font-size': 22), 
    'h4': ('font-size': 19), 
    'h5': ('font-size': 16), 
    'h6': ('font-size': 15), 
    '.special': ('font-size': 100), 
), 
    medium: (
    'h1': ('font-size': 39), 
    'h2': ('font-size': 28), 
    'h3': ('font-size': 22), 
    'h4': ('font-size': 19), 
    'h5': ('font-size': 16), 
    'h6': ('font-size': 15), 
    '.special': ('font-size': 200), 
), 
); 

Answer 1

Si vous pouvez spécifier un emplacement dans votre code HTML (comme dans votre exemple):

$header-styles: (
    small: (
    'h1': ('font-size': 39), 
    'article > h1': ('font-size': 100), // target only h1 that are direct children of an article 
    'h2': ('font-size': 28), 
    'h3': ('font-size': 22), 
    'h4': ('font-size': 19), 
    'h5': ('font-size': 16), 
    'h6': ('font-size': 15), 
), 
    medium: (
    'h1': ('font-size': 39),, 
    'article > h1': ('font-size': 200), // target only h1 that are direct children of an article 
    'h2': ('font-size': 28), 
    'h3': ('font-size': 22), 
    'h4': ('font-size': 19), 
    'h5': ('font-size': 16), 
    'h6': ('font-size': 15), 
), 
); 

En fonction de votre structure HTML, vous pouvez également utiliser pseudo selectors comme last-of-type ou nth-child() ajouté au type d'élément pour cibler plus généralement. J'ai toujours trouvé que l'approche de la spécificité (ci-dessus) était plus sûre que l'application légèrement dispersée des pseudo-sélecteurs.