html - SASS 中的目标属性值

Question

我在 HTML 和 SASS 中使用属性模块，因为它非常符合逻辑。目前，我可能有这样的标记:

<article data-post="wrap feature">
  <h1 data-post="title feature">Feature title</h1>
</article>

<article data-post="wrap">
  <h1 data-post="title">Normal title</h1>
</article>

SASS 看起来像这样:

[data-post] {
  font-size: 15px;
  color: black; }

[data-post~="title"] {
  font-size: 20px; }

[data-post~="title"][data-post~="feature"] {
  font-size: 30px; }

工作正常，但我想知道 SASS 中是否可以嵌套这些。它们都适用于[data-post]所以我想瞄准其中的属性。我正在想象这样的事情(这显然行不通):

[data-post] {
  font-size: 15px;
  color: black;

  &[~="title"] {
    font-size: 20px; }

  &[~="title"]&[~="feature"] {
    font-size: 30px; }
}

这会更符合逻辑、更 DRY 并且更容易编码/维护。

Answer 1

这已经很接近了。您每次都必须在子选择器中重新声明属性名称。类和 ID 可以不受 tacking on an ending to the parent class 的影响。 ，但如果您将相同的想法扩展到您的属性，您的第二个选择器将是 [data-post][~="title"]。

所以:

[data-post] {
  font-size: 10px;

  &[data-post~="title"] {
    font-size: 50px;
    color: blue;
  }
}

这应该可以帮助你到达那里。 http://jsbin.com/kazusamore/edit?html,css,js,output