Html 基础6的特殊情况航向尺寸

TL；博士

<> P>在基础6下的内置断点添加不同字体大小的最好方法是什么？

使用基础6，我可以调整在StoundStound.SSCS下的每个断点六个标题的映射：

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

---

如果您可以在HTML中指定位置（如在您的示例中）：

---

根据您的HTML结构，您还可以使用附加到元素类型的

last of type

或

nth-child（）。我总是发现特异性方法（如上）比伪选择器的稍微分散的枪应用程序更安全。
是的，这基本上就是我上面所说的，但我觉得这似乎有点脏，不是吗？我发现的唯一的另一个选项是在标题、段落等中添加断点，该断点与_settings.scss:h1{@include breakpoint（small up）{//styles}}下的基金会断点变量相关联。是的，这绝对正确！我会担心意外的后果，它会在升级时被覆盖，但除了编写自己的SASS/Map和/或变量之外，这似乎是唯一的方法。
$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),
  ),
);

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