良许Linux教程网 干货合集 Sass @extend 与 继承使用方法

Sass @extend 与 继承使用方法

SASS是便是一门动态样式语言,是一款款强化CSS的辅助工具,它在CSS语法的基础上,增加了变量,嵌套,混合,导入,函数的高级功能,这些拓展使CSS更加强大与优雅,有助于更好的管理样式文件,以及更高效的开发项目。

Sass @extend 与 继承使用方法

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

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

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

Sass 代码:

.button-basic  {
 border: none;
 padding: 15px 30px;
 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: 15px 30px;
 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 很好的体现了代码的复用。

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

730e0cf3d7ca7bcb0a46cd7b54597c63f6246b60021c
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部