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; }
}

这将更合乎逻辑，更干燥，并且更易于编码/维护。

Answer 1

这很近。您每次都必须在子选择器中重新声明属性名称。类和ID可以通过添加父类的结尾来避免，但是如果将相同的想法扩展到属性，则第二个选择器将是[data-post][~="title"]。

所以：

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

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

那应该带你到那里。http://jsbin.com/kazusamore/edit?html,css,js，输出