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

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

Answer 1

看起来.btn-b获得所有为.btn-a声明的样式，无论它们的声明顺序如何。

我已经玩过这个并想出一个替代方案：

SASS

.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（可以被称为任何东西）当然不会被使用，但它确实为你的其他按钮提供了“构建块”。

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

无法理解Sass中的@extend ...

2 个答案: