用@extend继承复用样式
回忆一下最上面的嵌套，嵌套的特点是，比如a嵌套b，a声明的属性，b是得不到的，而实践中一些css属性是不自动继承的，所以有时候需要a的声明让b也声明一次，怎么办？用@extend继承复用样式。
a {
width: 100%;
}
b {
@extend a;
font-size: 12px;
}
会得到：
a, b {
width: 100%;
}
b {
font-size: 12px;
}
说白了，就是谁继承了a，a的后面就把谁加上，加个逗号并列起来，以实现属性的复用。
进阶：占位选择器%搭配@extend使用
这个需要仔细理解一下，比如我定义了五种颜色的按钮，它们除了颜色和边框的一些区别之外完全相同，我的一种选择是先定义一个.btn，然后里面定义五种颜色，比如老外经常用的.danger、.warning、.error等等，我还有一种选择就是先弄一个.danger, .warning, .error {}，然后再分别.danger {}、.warning{}、.error{}。先不讨论哪种更科学，只说如果我想实现后一种，可以怎么做？你会说那就直接写个.danger, .warning, .error {}，这里就有问题了，如果我将来不再以这些单词作为class名，变成了red、green等等，这时候咋办？就算没变，我突然不再需要.danger这种警告色，我咋办？删好几处代码？No，我可以先弄一个虚假的选择器，也就是占位选择器：
%button-reset {
margin: 0;
padding: .5em 1.2em;
text-decoration: none;
cursor: pointer;
}
.save {
@extend %button-reset;
color: white;
background: #blue;
}
.delete {
@extend %button-reset;
color: white;
background: red;
}
%button-reset就是那个虚假的占位选择器，HTML中从不会用它，它只用于scss文件中。然后，@extend %button-reset表示把.save、.delete这些个class名字，复制到%button-reset的位置上，形成：
.save, .delete {
margin: 0;
padding: .5em 1.2em;
text-decoration: none;
cursor: pointer;
}
.save {
color: white;
background: #blue;
}
.delete {
color: white;
background: red;
}
使用占位选择器和继承，你应该注意这几点：
- 优先继承占位选择器，而不是继承具体的选择器；
- 如果必须继承一个 .class 时，请只继承单一的 .class，不要使用复杂的选择器；
- 继承能不用就不用，毕竟继承比嵌套更复杂，你需要在代码简化与直观上做权衡；
- 避免继承常见的父类选择器（比如： .foo .bar）或者是常见的相邻选择器（比如：.foo ~ .bar），否则会让选择器的数量急速增加。
- 不要跨媒体查询继承。
跟@mixin+@include作对比：
继承跟@mixin+@include有一点像，但作用相反：
- @mixin+@include是把一段代码分发给N处；
- %+@extend是把N处的选择符汇总起来写成组合选择符，给这个组合选择符再配上声明；
- 如果只有@extend没有%，是把N处的class名字汇总起来加到一个已有的选择器的后面并列起来。
那么哪些情况用混合器，哪些情况用继承？
混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承主要是基于类的（也有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error） ，这时使用继承再合适不过了。
也就是说：
- 当你想复用一些表现上的高使用率的代码时，你应该用混合器；
- 当你想复用逻辑上的更宏观的类的时候，应该用继承；
- 混合器的名称只在scss内有效；
- 继承的类名或者其他选择符，都是HTML文件中真实存在的名称。
- 跟混合器相比，继承生成的CSS代码相对更少。因为继承仅仅是重复选择器，而不会重复声明，所以使用继承往往比混合器生成的CSS体积更小。如果你非常关心你站点的速度，请牢记这一点。
- 继承遵从CSS层叠的规则。当两个不同的CSS规则应用到同一个HTML元素上时，并且这两个不同的CSS规则对同一属性的修饰存在不同的值， CSS层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
进阶：使用继承的最佳实践
就一句话：不要让后代选择器（比如.foo .bar）去继承CSS规则。但你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长。也就是说：
绝对不要：
.foo .bar {
@extend #id;
}
允许：
.foo {
@extend #id .bar .a .b .c .d;
}
所以，如果你想让.seriousError继承.error，不要给.seriousError的前面加父选择符。
流程控制
条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 {
border: 1px solid; }
@if 5 < 3 {
border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
网友评论