zoukankan      html  css  js  c++  java
  • Sass--混合宏 VS 继承 VS 占位符

    什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果:

    a) Sass 中的混合宏使用

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

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

    b) Sass 中继承

    同样的,将上面代码中的混合宏,使用类名来表示,然后通过继承来调用:

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

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

    c) 占位符

    最后来看占位符,将上面代码中的基类 .mt 换成 Sass 的占位符格式:

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

    总结表格

  • 相关阅读:
    vim 查找文件指定内容所在位置
    tar 使用小技巧
    dpkg 安装deb包
    Jetbrains 全家桶(IDEA,PyCharm...)
    Python如何生成requirements.txt文件
    MySQL——导入数据报字段编码错误
    视图的概念、作用以及如何创建
    hive与hbase及MySQL的区别
    mysql—排序函数rank() over()、dense_rank() over()、row_num() over()
    mysql —net start mysql 命令发生系统错误5和错误1058的解决方法
  • 原文地址:https://www.cnblogs.com/qjuly/p/9078168.html
Copyright © 2011-2022 走看看