混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如:

@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
} .box {
@include border-radius;
margin-bottom: 5px;
} .btn {
@include border-radius;
}

示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS:

.box {
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 5px;
} .btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}

上例明显可以看出,Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

Sass--混合宏的不足的更多相关文章

  1. [Sass]混合宏的参数

    [Sass]混合宏的参数--传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的 ...

  2. [Sass]混合宏

    [Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...

  3. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  4. Sass 混合宏、继承、占位符 详解

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  5. css编译工具Sass中混合宏,继承,占位符分别在什么时候使用

    //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...

  6. sass---Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  7. sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...

  8. Sass之混合宏、继承、占位符

    1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数 ...

  9. Sass--调用混合宏

    在 Sass 中通过 @mixin 关键词声明了一个混合宏,那么在实际调用中,其匹配了一个关键词“@include”来调用声明好的混合宏.例如在你的样式中定义了一个圆角的混合宏“border-radi ...

  10. scss 初学笔记 二 混合宏

    混合宏 格式  @mixin 定义混合宏 (相当于变量声明 var  $ ?) //不带参数混合宏 @mixin borderRadius{ -webkit-border-radius: 5px; b ...

随机推荐

  1. Dump文件的生成

    一.Windows系统的任务管理器里抓dump 启动任务管理器,选中某个进程,右键,弹出菜单"创建转储文件" 注意事项: 当你在64位Windows系统上抓32位进程的dmup文件 ...

  2. 配置中心git版本示例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springCl ...

  3. php heredoc的用法详解

    Heredoc技术,在正规的PHP文档中和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术.但是现在的一些论坛程序,和部分文章系统,都巧妙的使用heredoc技术,来部分的实 ...

  4. CSS页面乱码 GB2312、UTF-8格式问题解决方案

      如同左图所现,出现了页面乱码问题本来应该是显示gb3212字符的"关闭"文字了.. 解决方案一: 在所调用的CSS页面的第一行添加下边的这一句代码, 注意:一定要是在CSS的头 ...

  5. inline-block的间隙问题 box-orient属性 line-clamp属性 margin问题

    只要设了 display:inline-block 将元素变成行级块元素的时候,会自带空隙,即使你设了 margin 和 padding 依然没有效果! 解决办法:只要在父元素上加上font-size ...

  6. 洛谷P1378 油滴扩展(搜索)

    洛谷P1378 油滴扩展 直接暴力搜索更新答案就可以了. 时间复杂度为 \(O(n!)\) . #include<stdio.h> #include<stdlib.h> #in ...

  7. ''.startswith() and ''.endswith() instead of string slicing to check for prefixes or suffixes.

    w http://legacy.python.org/dev/peps/pep-0008/ Yes: if foo.startswith('bar'):No:  if foo[:3] == 'bar' ...

  8. sqlalchemy.exc.IntegrityError: (mysql.connector.errors.IntegrityError) 1062 (23000): Duplicate entry '1' for key 'PRIMARY'

    排错: 看到 Duplicate entry '1' for key 'PRIMARY'是主键错误 看一看自己添加的数据id是1 再查询一下数据库中的表,发现id=1的记录已经存在了 所以在代码中让i ...

  9. Jenkins使用一:CentOS7安装Jenkins

    安装jdk环境: yum search jdk 装 1.8版本的:yum install -y java-1.8.0-openjdk 安装Jenkins wget -O /etc/yum.repos. ...

  10. Windows 下手工搭建 LNMP 环境

    参考资料 如果想方便,可以直接使用集成的 LNMP 环境(例如 PHPStudy). 下载 PHP 下载地址:https://windows.php.net/download 根据你的系统选择 32 ...