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

@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. 对async 函数的研究

    async 函数 1.ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator ...

  2. POJ 3660 Cow Contest ( 最短路松弛思想应用 && Floyd求传递闭包 )

    题意 : 给出 N 头奶牛在比赛的结果,问你最多的能根据给出结果确定其名次的奶牛头数.结果给出的形式为 A  B 代表在比赛当中 A 战胜了 B 分析 : 对于一头奶牛来说,如果我们能确定其他 N - ...

  3. MVC 无法将带 [] 的索引应用于“System.Dynamic.DynamicObject”类型的表达式

    无法将带 [] 的索引应用于“System.Dynamic.DynamicObject”类型的表达式 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代 ...

  4. Harbor - 私有企业级 Docker 镜像仓库

    GitHub 地址 容器镜像服务 Docker镜像的基本使用 Docker:企业级私有镜像仓库Harbor使用 Harbor 是基于 Docker Registry 的企业级镜像仓库,安装后的使用方法 ...

  5. C++输出字符指针指向的地址

    int main() { char *s2 = "jwdajkj"; ]; )); printf("%p,%p\n", s3, s1); cout <&l ...

  6. pygame应用——生产者消费者模型

    因为操作系统的一个生产者-消费者拓展作业,以一个飞机大战的模型修改来的 import pygame import time from pygame.locals import * bulletsNum ...

  7. nodejs基础-HTTP

    案例通过nodejs编写http服务程序 步骤:1,加载http模块2.创建http服务3.为http服务对象添加request事件处理程序4·开启http服务监听,准备接收客户端请求注意:1,浏览器 ...

  8. C++学习笔记(二)--基础

    1.浮点型数值不管写成什么样 都是以指数形式保存在内存中 数符|数字部分|指数部分 例:+0.33E10 数字部分的整数部分不能大于1,小数点后面不能是0. 2.字符数据是以整数形式保存在内存中的(A ...

  9. DS-哈希表浅析

    1.哈希表 2.哈希函数 3.哈希冲突 哈希表 哈希表是一种按key-value存储的数据结构,也称散列表. 之前的数组.树和图等等查找一个值时都要与结构中的值相比较,查找的效率取决于比较的次数. 而 ...

  10. ash: export: `/usr/lib/jvm/jdk1.8.0_201/lib/dt.jar': 不是有效的标识符

    ash: export: `/usr/lib/jvm/jdk1.8.0_201/lib/dt.jar': 不是有效的标识符 ps: 如果有任何问题可以评论留言,我看到后会及时解答,评论或关注,您的鼓励 ...