混合宏 VS 继承 VS 占位符

a) Sass 中的混合宏使用

总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处,他可以传参数。

个人建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。

b) Sass 中继承

总结:使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多,也是 CSSer 期望看到。但是他不能传变量参数。

个人建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。

c) 占位符

总结:编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”

个人建议:在代码块中是额外声明又经常用到的,使用占位符。

来看一个表格:

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

推荐阅读更多精彩内容

  • 一、Sass的语法格式及编译调试 1. Sass和scss的区别 本质上来说是同一个东西,只是语法上有细微的差异:...
    没汁帅阅读 5,182评论 0 5
  • 声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是...
    Junting阅读 5,306评论 0 6
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 5,682评论 2 10
  • 2015年10月20日 1.嵌套 Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无...
    a0d560da7818阅读 3,780评论 0 1
  • 结识Leo老师已然有9个月了,在他的训练中,开启了事业(PQ)、学习(MQ)、关系(EQ)、自己(SQ)这四个能量...
    miolos阅读 4,879评论 0 4