难以理解@extend in Sass ...

Question

注意:这是我在codeschool.com上的一个在线课程的例子……

所以在_buttons.scss文件中有这样的代码

.btn-a {
   background: #777;
   border: 1px solid #ccc;
   font-size: 1em;
   text-transform: uppercase;
}
.btn-b {
   @extend .btn-a;
   background: #ff0;
}
.sidebar .btn-a {
   text-transform: lowercase;
}

然后，application.css中的输出CSS为

.btn-a,
.btn-b {
   background: #777;
   border: 1px solid #ccc;
   font-size: 1em;
   text-transform: uppercase;
}
.btn-b {
   background: #ff0;
}
.sidebar .btn-a,
.sidebar .btn-b {
   text-transform: lowercase;
}

关于我的问题。我不明白为什么application.css获得了.sidebar .btn-b部分。我认为这是一个需要理解的非常重要的概念，因为这个示例被用来引入占位符选择器。谢谢你的帮助。

Answer 1

看起来.btn-b获得了为.btn-a声明的所有样式，而不管它们被声明的顺序如何。

我已经尝试过了，并提出了一个替代方案：

萨斯

.btn{
   background: #777;
   border: 1px solid #ccc;
   font-size: 1em;
   text-transform: uppercase;
}
.btn-a {
    @extend .btn;
text-transform: lowercase;
}
.btn-b {
   @extend .btn;
   background: #ff0;
}

CSS

.btn, .btn-a, .btn-b {
  background: #777;
  border: 1px solid #ccc;
  font-size: 1em;
  text-transform: uppercase;
}

.btn-a {
  text-transform: lowercase;
}

.btn-b {
  background: #ff0;
}

这引入了一个.btn (可以被称为anything)的虚拟类，这个类当然不会被使用，但它确实为你的其他按钮提供了“构建块”。

Answer 2

当你扩展一个类时，基本上就是在使用该类的任何地方添加选择器。

.class {}
.wrapper .class {}

.extender {
  @extend .class;
}

生成：

.class,
.extender {}
.wrapper .class,
.wrapper .extender {}

解决这个问题的最好方法是使用占位符选择器。

%class,
.class {}
.wrapper .class {}

.extender {
  @extend %class;
}

这将生成：

.extender,
.class {}
.wrapper .class {}