Question

当我浏览sass文档时，我遇到了这个问题 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#merging_selector_sequences 这真的让我失望了。这是它使用的例子：

#admin .tabbar a {
    font-weight: bold;
}

#demo .overview .fakelink {
  @extend a;
}

编译到

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

我可以得到前两个#admin .tabbar a和#admin .tabbar #demo .overview .fakelink应该生成，但最后一个#demo .overview #admin .tabbar .fakelink对我来说真的没有意义，因为我认为@extend是应该制作包含a的任何选择器的副本，并将其替换为#demo .overview .fakelink。

我的更多错误是

虽然技术上可以生成所有可能匹配任一序列的选择器，但这会使样式表太大。例如，上面的简单示例需要十个选择器。

我不明白它是如何得出10号的，即使你按照#admin .tabbar和#demo .overview的顺序进行了所有组合，它也只会是6：< / p>

#admin .tabbar #demo .overview .fakelink
#admin #demo .overview .tabbar .fakelink
#demo .overview #admin .tabbar .fakelink
#demo #admin .overview  .tabbar .fakelink
#admin #demo .tabbar .overview .fakelink
#demo #admin .tabbar .overview .fakelink

所以我真的很担心我错过了关于@extend真正有效的方面。如果有人能帮我澄清这些东西，我真的很感激。

Answer 1

您对@extend的一般理解是正确的。引用reference：

中的摘要

@extend的工作原理是在扩展选择器[...]出现的样式表中的任何位置插入扩展选择器。

例如

#zoo .animal {
  color: red;
}

.elephant {
  @extend .animal;
}

编译到

#zoo .animal, #zoo .elephant {
  color: red;
}

然而，我们在这里讨论的是一种特殊情况，其中选择器序列在另一个序列中扩展选择器。在这种情况下，合并需要序列，并且有许多可能的方法。而不是生成所有可能的组合，

Sass只生成可能有用的选择器

和

当合并的两个序列没有共同的选择器时，会生成两个新的选择器：一个在第二个序列之前有第一个序列，另一个在第一个序列之前有第二个序列。

这怎么有用？

看一下以下示例：

/*
 * There are young animals, which are small.
 */
.animals .young-animals .animal {
  font-size: 12px;
}

/*
 * And there are older animals, which are a little bigger.
 */
.animals .old-animals .animal {
  font-size: 18px;
}

/*
 * Whenever I tell my kid a a bedtime story, its beloved teddy bear
 * will be an animal.
 */
#bedtime-story .teddy-bear {
  @extend .animal;

  &:before {
    content: 'roar!';
  }
}

根据我们对@extend如何适用于简单情况的理解，我们假设编译后的输出只包含

.animals .young-animals .animal,
.animals .young-animals #bedtime-story .teddy-bear {
  font-size: 12px;
}

但是这将我们的标记限制为类似于以下的结构：

<div class="animals">
  <div class="young-animals">
    <div id="bedtime-story">
      <div class="teddy-bear">Winnie</div>
    </div>
  </div>
</div>

使用已编译的CSS中的附加选择器

#bedtime-story .animals .young-animals .teddy-bear

我们有机会使用可能更合适的嵌套，如下所示：

<div id="bedtime-story">
  <div class="animals">
    <div class="old-animals">
      <div class="dog">Pluto</div>
      <div class="chicken">Coco</div>
    </div>
    <div class="young-animals">
      <div class="teddy-bear">Winnie</div>
    </div>
  </div>
</div>

在OP的示例中它几乎相同：可能有一个#demo系统包含#admin部分，或者可能有#admin面板包含{ {1}}部分。在任何一种情况下，#demo应该看起来像.fakelink。我可以猜测，但我认为从给定的组合中可能认为可能是有用的，通常是那些你不会分割单个序列的组合，因为你可能不会这样做。在你的标记中这样做（以模块思考）。

sass @extend如何真正适用于＆＃34;合并选择器序列＆＃34;？

1 个答案:

这怎么有用？