Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1910839
  • 博文数量: 45
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 515
  • 用 户 组: 普通用户
  • 注册时间: 2019-08-05 16:22
文章分类

全部博文(45)

文章存档

2020年(4)

2019年(41)

我的朋友

分类: Html/Css

2020-03-19 14:41:10

定义和使用

@extend 指令使您可以将一组 CSS 属性从一个选择器共享到另一个选择器。
如果您具有几乎相同样式的元素,但仅在一些小细节上有所不同,则 @extend 指令很有用。

示例

下面的 Sass 示例首先为按钮创建一个基本样式(此样式将用于大多数按钮); 然后,我们为“报告”按钮创建一种样式,为“提交”按钮创建一种样式; “Report” 和 “Submit” 按钮都通过 @extend 指令从 .button-basic 类继承所有 CSS 属性;此外,它们还定义了自己的颜色:

  1. .button-basic {
  2.   border: none;
  3.   padding: 15px 30px;
  4.   text-align: center;
  5.   font-size: 16px;
  6.   cursor: pointer;
  7. }
  8. .button-report {
  9.   @extend .button-basic;
  10.   background-color: red;
  11. }
  12. .button-submit {
  13.   @extend .button-basic;
  14.   background-color: green;
  15.   color: white;
  16. }
编译后,CSS 将如下所示:

  1. .button-basic, .button-report, .button-submit {
  2.   border: none;
  3.   padding: 15px 30px;
  4.   text-align: center;
  5.   font-size: 16px;
  6.   cursor: pointer;
  7. }
  8. .button-report {
  9.   background-color: red;
  10. }
  11. .button-submit {
  12.   background-color: green;
  13.   color: white;
  14. }
通过使用 @extend 指令,您无需在 HTML 代码中为元素指定多个类,例如:;您只需要指定 .button-report 即可获得两组样式。
@extend 指令有助于使您的 Sass 代码保持非常干燥。

相关页面




阅读(934) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~