Sass中的@extend注意

Sass在线编译：https://www.sassmeister.com/

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个公共box样式与一个特殊box样式，一般会这样写：

/*
# 先知道什么是通用样式和特殊样式
- 简单一点来说特殊样式就是私有样式，比如有如下一组标签：
*/
<div class="public-style special-style">黄色</div>
/*通常样式会写*/
.public-style{
 font-size:25px; /*通用样式*/
}
.special-style{
 color:yellow;/*这里就是特殊样式*/
}
/*
这里有一点就需要注意，当你如果想修改special-style样式的时候你需要看一下public-style的样式，不然
很可能会给html添加一些无意义的样式

如果有多个html标签需要用到public-style通用样式，这样就有可能会在html中重复两个class，所以这时就
可以用到@extend
*/

• 拿上面的举例：

.public-style{
 font-size:25px; /*通用样式*/
}
.special-style{
 @extend .public-style;
 color:yellow;/*这里就是特殊样式*/
}

• 编译后

.public-style, .special-style {
  font-size: 25px;
}

.special-style {
  color: yellow;
}

• 多个特殊样式

.public-style{
 font-size:25px; /*通用样式*/
}
.special-style{
 @extend .public-style;
 color:yellow;/*这里就是特殊样式*/
}
.x{
 @extend .public-style;
 color:yellow;/*这里就是特殊样式*/
}

• 编译后

.public-style, .x, .special-style {
  font-size: 25px;
  /*通用样式*/
}

.special-style {
  color: yellow;
  /*这里就是特殊样式*/
}

.x {
  color: yellow;
  /*这里就是特殊样式*/
}
/*这样就无需在每个html标签中去定义两个class*/

• @extend的注意点

可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承，因为在这种情况下，Sass会生成多种组合，后代更多的话，Sass生成的也就越多，虽然Sass最后只会使用几个，但是这其中的几个依旧可能会存在没用的。

.flex{
    color:red;
}
.box{
    @extend .flex;
    font-size:15px;
}
/*这样生成的情况是正常的也是想要的，但是如果我把flex变成后代选择器*/

.box1 .box2 .flex{
    color:red;
}
.box{
    @extend .flex;
    font-size:15px;
}

- 编译后
.box1 .box2 .flex, .box1 .box2 .box {
  color: red;
}
.box {
  font-size: 15px;
}
/*
可以看到，正常的理想情况是：
.box1 .box2 .flex, .box {
  color: red;
}
这个才是理想想要的，实际编译出来的.box1 .box2 .box可能都用不到，而把
.box也变成后代选择器之后：*/
.box1 .box2 .flex{
    color:red;
}
.box3 .box4 .box{
    @extend .flex;
    font-size:15px;
}

- 编译后
.box1 .box2 .flex, .box1 .box2 .box3 .box4 .box, .box3 .box4 .box1 .box2 .box {
  color: red;
}

.box3 .box4 .box {
  font-size: 15px;
}
/*这样编译后的组合选择器则更多，所以为了避免这种情况，建议：
 - 继承的属性（.flex）建议不要被后代选择器修饰，而被继承的无所谓
*/

• 有一点还需要注意，@extend是会延伸继承的，比如：.ak继承.box继承.flex，如下:

.flex{
    color:red;
}
.box3 .box4 .box{
    @extend .flex;
    font-size:15px;
}
.box3 .box4 .box .ak{
    @extend .box;
    border-style:solid;
}

- 编译后
.flex, .box3 .box4 .box, .box3 .box4 .box .ak {
  color: red;
}

.box3 .box4 .box, .box3 .box4 .box .ak {
  font-size: 15px;
}

.box3 .box4 .box .ak {
  border-style: solid;
}
/*
可以看到.ak也继承了flex的颜色，这里就需要注意一下，可能你@extend .box;但是并不想继承flex的颜色
，最后Sass编译的时候根据@entend的延伸继承也是会继承flex的颜色的，所以需要注意一下
*/