особый случай заголовок размеров с Фондом 6

Question

TL; DR

Каков наилучший способ добавить разнообразные шрифт проклейки относительно встроенной точки останова при Фонде 6?

С Фондом 6 можно настроить отображение под _settings.scss для шести заголовков в контрольной точке:

$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), 
), 
); 

Это хорошо для заголовки верхнего уровня, но когда у меня есть несколько h1 на странице в структуре разметки , Я хочу, чтобы h1 в других подразделах имел другой размер шрифта. Например. 19px вместо 39px, описанных выше.

<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:

Я узнал, что я могу добавить в имени класса в списке, и это работает, но это, кажется, как ненадлежащим образом, чтобы сделать это, и это предполагает вторичное h1 будет всегда имеют класс .special:

$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

Если вы можете указать место в вашем HTML (как в вашем, например):

$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), 
), 
); 

В зависимости от вашей структуры HTML вы также можете использовать pseudo selectors, например last-of-type или nth-child(), присоединенный к типу элемента для более общего назначения. Я всегда находил подход специфичности (выше) более безопасным, чем приложение с небольшим рассеянием от псевдоселекторов.