面向工资编程,面向面试学习!

Sass @extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。

以下 Sass 实例中,我们创建了一个基本的按钮样式 .button-basic,接着我们定义了两个按钮样式 .button-report 与 .button-submit,它们都继承了 .button-basic ,它们主要区别在于背景颜色与字体颜色,其他的样式都是一样的。

Sass 代码:

.button-basic  border: nonepadding: 15px 30pxtext-align: centerfont-size: 16pxcursor: pointer;}
.button-report  @extend .button-basicbackground-color: red;}
.button-submit  @extend .button-basicbackground-color: greencolor: white;}

将以上代码转换未 CSS 代码,如下所示:

Css 代码:

.button-basic, .button-report, .button-submit border: nonepadding: 15px 30pxtext-align: centerfont-size: 16pxcursor: pointer;}
.button-report  background-color: red;}
.button-submit  background-color: greencolor: white;}

使用 @extend 后,我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ,只需要设置 class="button-report" 类就好了。

@extend 很好的体现了代码的复用。