Css 无法理解Sass中的@extend。。。

注：这是我在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

部分。我认为这是一个需要理解的非常重要的概念，因为这个示例用于介绍占位符选择器。感谢您的帮助。

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

我已经考虑过这个问题，并提出了一个替代方案：

无礼

CSS

---

这引入了一个伪类.btn（可以称为任何东西），当然没有使用它，但它确实为您的其他按钮提供了“构建块”。

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

我已经考虑过这个问题，并提出了一个替代方案：

无礼

CSS

---

这引入了一个伪类.btn（可以称为任何东西），当然没有使用它，但它确实为其他按钮提供了“构建块”。

扩展类时，基本上是在使用该类的任何地方添加选择器

.class {}
.wrapper .class {}

.extender {
  @extend .class;
}

生成：

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

解决此问题的最佳方法是使用占位符选择器

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

.extender {
  @extend %class;
}

由此产生：

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

---

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

.class {}
.wrapper .class {}

.extender {
  @extend .class;
}

生成：

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

解决此问题的最佳方法是使用占位符选择器

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

.extender {
  @extend %class;
}

由此产生：

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

---

+1显示更整洁的

@extend

示例的额外代码。我们大多数人都惊讶地发现

@extend

非常贪婪。非常感谢！在我所学的课程中，我在上述问题中使用的代码实际上是用来向我们展示“虚拟”技巧的使用/重要性，但事实是“.btn-b获得了为.btn-a声明的所有样式，而不管它们声明的顺序是什么”，我无法理解。您帮了大忙。+1获取额外代码，显示了一个整洁的

@extend

示例。我们大多数人都惊讶地发现

@extend

非常贪婪。非常感谢！在我所学的课程中，我在上述问题中使用的代码实际上是用来向我们展示“虚拟”技巧的使用/重要性，但事实是“.btn-b获得了为.btn-a声明的所有样式，而不管它们声明的顺序是什么”，我无法理解。你帮了大忙。很好，谢谢。虽然我从理论上了解到了这一点，但可以说，我在这个领域还没有遇到过，我希望我能够认识到这种方法的一个机会。很酷，谢谢。虽然我从理论上理解了这一点，但可以说，我在这个领域还没有遇到过，我希望我能够认识到这种方法的一个机会。