在 Sass 里面，我们可以使用继承或者叫扩展来减少重复的工作，用的是 @extend 这个指令，它的功能就是，可以让一个选择器去继承另一个选择器里面定义的所有的样式。下面，我们去试一下这个 @extend ...

比如这里我们有一个类叫 .alert，在这里定义了一些样式 ... 这个 .alert 的作用就是让元素变成一个警告提醒的区块 ... 另外我们可能还想再设计一些其它样式的警告提醒 ... 它们都有不同的背景，文字，边框的颜色 ...

在下面，我们再添加一个叫 .alert-info 的类选择器 .. 在这个选择器里，需要用到在 .alert 里面定义的所有的样式 ... 另外它还需要一些自己的更具体的样式。

这里先用一个 @extend ... 去继承一下 .alert 这个选择器 ... 然后再添加一个自己的样式 ... 比如一个浅蓝色的背景 ... background-color ... #d9edf7 ...

.alert-info {
@extend .alert;
background-color: #d9edf7;
}

保存 ... 你会看到编译之后的结果 ... 因为 .alert-info 里面用了一个继承，去继承了 .alert 这个选择器里的样式 ... 所以输出的时候，会用一个群组选择器 ... 这里就是 .alert ... .alert-info ... 这两个选择器，会同时拥有在这个群组选择器里定义的样式 .. 也就是这个 15px 的内边距 ...

另外，Sass 还给我们把 .alert-info 独有的样式单独拿出来 .. 就是这个浅蓝色的背景 ... 这个继承不仅仅是去继承 .alert 这个选择器里的样式 .. 另外一些跟 .alert 相关的选择器里的样式，都会被 .alert-info 继承过来 ...

在这里，我们再去添加一个跟 .alert 相关的样式 ... .alert a .... 去设计一下在 .alert 下面的链接的样式 .. 用一个 font-weight 属性 ... 设置成加粗的样式 ...

.alert a {
font-weight: bold;
}

保存 ... 你会看到，编译以后，这个为 .alert 下面的 a 标签添加的样式，也会用在 .alert-info 这个类下面的 a 标签上 ... Sass 的 @extend 输出的结果，就是使用这样的群组选择器，来保证让使用继承的选择器，拥有它继承的选择器还有相关的选择器里面定义的样式。