首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
Sass介绍
Sass 安装
Sass 变量
Sass 嵌套规则与属性
Sass @import
Sass @mixin 与 @include
Sass @extend 与 继承
Sass字符串函数
Sass 数字函数
Sass列表函数
Sass Map函数
Sass选择器相关函数
当前位置:
首页>>
技术小册>>
SASS零基础入门
小册名称：SASS零基础入门
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。 以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。 Sass 代码： ```bash .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 代码： ```bash .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" ，只需要设置 class="button-report" 类就好了。 @extend 很好的体现了代码的复用。
上一篇：
Sass @mixin 与 @include
下一篇：
Sass字符串函数
该分类下的相关小册推荐：
暂无相关推荐.
