2

Note: this is an example from an online course I am taking at codeschool.com ...

So in the _buttons.scss file there is this code

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

And then the output CSS in application.css is

.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 Now as to the question that I have ... I am not understanding why application.css gains the .sidebar .btn-b section. I think this is a pretty important concept to understand because this example is being used to introduce placeholder selectors. Thanks for your help.

4

2 回答 2

2

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

.class {}
.wrapper .class {}

.extender {
  @extend .class;
}

生成：

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

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

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

.extender {
  @extend %class;
}

生成：

.extender,
.class {}
.wrapper .class {}
于 2013-09-19T21:16:28.193 回答
2

看起来 .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 的虚拟类（可以称为任何东西），当然没有使用它，但它确实为您的其他按钮提供了“构建块”。

于 2013-09-17T07:53:29.813 回答