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

这很接近。您每次都必须在子选择器中重新显示属性名称。 tacking on an ending to the parent class可以使用类和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,output

在SASS中定位属性值

1 个答案: