Sass的@extend与继承如何使用
本篇内容介绍了“Sass的@extend与继承如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
SASS是便是一门动态样式语言,是一款款强化CSS的辅助工具,它在CSS语法的基础上,增加了变量,嵌套,混合,导入,函数的高级功能,这些拓展使CSS更加强大与优雅,有助于更好的管理样式文件,以及更高效的开发项目。
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。
以下 Sass 实例中,我们创建了一个基本的按钮样式 .button-basic,接着我们定义了两个按钮样式 .button-report 与 .button-submit,它们都继承了 .button-basic ,它们主要区别在于背景颜色与字体颜色,其他的样式都是一样的。
Sass 代码:.button-basic{border:none;padding:15px30px;text-align:center;font-size:16px;cursor:pointer;}.button-report{@extend.button-basic;background-color:red;}.button-submit{@extend.button-basic;background-color:green;color:white;}
将以上代码转换为 CSS 代码,如下所示:
Css 代码:.button-basic,.button-report,.button-submit{border:none;padding:15px30px;text-align:center;font-size:16px;cursor:pointer;}.button-report{background-color:red;}.button-submit{background-color:green;color:white;}
使用 @extend 后,我们在 HTML 按钮标签中就不需要指定多个类 class=”button-basic button-report” ,只需要设置 类就好了。
@extend 很好的体现了代码的复用。
“Sass的@extend与继承如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。