扩展/继承

在 Sass 中也具有继承一说,也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。如下所示:

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译出来之后:

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

从示例代码可以看出,在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

个人觉得继承能弥补混合宏的不足

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是...
    Junting阅读 1,480评论 0 6
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 1,747评论 2 10
  • 再谈CSS 预处理器2016-09-09 Justineo JavaScript转自:http://efe.bai...
    抓住时间的尾巴吧阅读 1,593评论 0 2
  • 《心属》2017年约稿函 杂志定位:集古风、青春、神话、魔幻、悬疑、推理、言情于一身的小说集锦杂志。 稿件字数:短...
    心属杂志社阅读 332评论 0 0
  • 谁也没有看见过风 不用说我和你了 但是树叶颤动的时候 我们知道风在那儿了 谁也没有看见过风 不用说我和你了 但是树...
    Jessie啊呆阅读 2,256评论 0 0