SASS是一个预处理器，它提供了诸如变量、嵌套、混合、继承等功能，并使CSS变得简洁和易于维护。
SASS中的@extend指令允许我们在选择器之间轻松地共享样式。 但是，当它用于大型项目时，可能会产生不利影响。让我们看看是怎么回事。
在VWO的SASS代码中，我们有超过50个文件。当代码开始变得不可预测和难以调试时，就需要去除继承性。调试的困难使我们在新的需求出现时覆盖CSS；否则需要大量的时间在开始之前了解现有的继承代码，以便任何新的规则添加不会破坏现有CSS。这就是删除@extend的必要性。
以下是我们摒弃@extend的原因。
可维护性高
.title {
text-transform: uppercase;
font-size: 11px;
}
label {
@extend .title;
font-size: 13px;
}
......并在文件的结尾处添加。
.title {
font-size: 12px;
}
如果打开这个文件并查看label 规则，人们会认为它是13px的，但实际上它是12px的。<label>I will always be 12px</label>
这是因为在编译时，结果是这样的：
.title , label {
text-transform: uppercase;
}
label {
font-size: 13px;
}
.title , label {
font-size: 12px;
}
label 在 的最后一个定义中分享规则。.title
如果有人试图覆盖title，而不知道它已经在其他类中被扩展了，那么这个人最终可能会无意中添加一些错误的规则。
调试困难
如果项目的CSS很大的话，调试就会变得很困难，因为你需要跟踪每一个扩展类。如果我们考虑上述label 和.title 的例子，在浏览器中查看CSS，我们将很难弄清楚label 的字体大小为12px 的原因。这需要大量的时间来调试这样的代码，特别是当你有多个SASS文件时。
文件大小增加
当我们把@extend从所有的sass文件中删除后，大小从164KB => 154KB
分布式代码
一个类的代码应该包含在一个地方，而不是分布在很多地方。为了维护代码而扩展的类或占位符，在多个CSS文件或长的CSS代码的情况下，实际上会使代码不整齐，难以理解。 下面是一个例子：
.font--13 {
font-size: 13px;
}
.tile {
display: inline-block;
border: 1px solid;
@extend .font--13;
}
%size--200 {
width: 200px;
height: 200px;
}
.tile--200 {
@extend .tile;
@extend %size--200;
font-size: 14px;
}
.circle--200 {
@extend %size--200;
}
生成的代码：
.font--13, .tile, .tile--200 {
font-size: 13px;
}
.tile, .tile--200 {
display: inline-block;
border: 1px solid;
}
.tile--200, .circle--200 {
width: 200px;
height: 200px;
}
.tile--200 {
font-size: 14px;
}
生成的代码非常难读，一点也不清晰。这段特殊的代码中，仅.tile-200类就有4处交错的规则。
对@扩展的解决方案
我们通过混合器的帮助来解决这些问题，如果是单行的，就直接写规则：
例如，在上面的例子中SASS将是：
.font--13 {
font-size: 13px;
}
@mixin tile {
display: inline-block;
border: 1px solid;
font-size: 13px;
}
.tile {
@include tile;
}
@mixin size--200 {
width: 200px;
height: 200px;
}
.tile--200 {
@include tile;
@include size--200;
font-size: 14px;
}
.circle--200 {
@include size--200;
}
生成的CSS代码将是：
.font--13 {
font-size: 13px;
}
.tile {
display: inline-block;
border: 1px solid;
font-size: 13px;
}
.tile--200 {
display: inline-block;
border: 1px solid;
font-size: 13px;
width: 200px;
height: 200px;
font-size: 14px;
}
.circle--200 {
width: 200px;
height: 200px;
}
这段代码将每个类的规则都放在一个地方，使其更容易理解和清晰，从而使调试更容易，维护更少。
所有这些原因迫使我们把@extend从我们的SASS中删除，因此我们的代码和编码员从此过上了幸福的生活!
欢呼吧!
