Sass学习之路(8)——拓展/继承/占位符

1.拓展/继承

Sass中和CSS一样，也具有继承的用户，也是继承类中的样式代码块。Sass中是通过关键词"@extend"来继承已存在的类样式块，从而实现代码的继承。

举个栗子：

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

这里 .btn-primary和.btn-second都继承了.btn中的代码，编译之后如下:

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

从代码中可以看出，继承之后的代码编译出来的CSS中，出色地讲样式相同的选择器合并在了一起，这算是继承与混合宏比较最大的优点。

2.占位符 %placeholder

占位符也是一个非常强大的功能，和继承也有着密切的关系。比如说，我们有多个类都有相同的代码共有，需要继承同一个基类。但是基类本身并不存在或者基类自身并不需要这些样式，那么像上边继承的写法有产生了代码的冗余，最终会编译出多余的代码。

这个时候，占位符的作用就体现出来了，用占位符声明的代码，在不被@extend调用的情况下，是不会产生任何代码的，举个栗子：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

上边 我们用占位符声明了两个用来被继承的类%mt5和%pt5,在再让我们来看看编译后的代码吧:

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

我们会发现，编译后的代码和上边的继承一样，出色的完成了代码合并，且基类并没有被编译出来，只作用与调用了它的类中。

3.混合宏、继承、占位符的比较：

混合宏：可以传参数，但是代码冗余，相同样式不会合并选择器。所以适合在我们多次使用相同样式，但是值不同的情况下使用。

继承：不能传参数，代码会自动合并，不会冗余。适合于不需要传参的情况下复用代码，并且基类代码具有作用的情况。

占位符：同上，但是区别是在基类没有作用的情况下使用。