混合器

如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体)，那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:

notice {background-color: green;border: 2px solid #00aa00;@include rounded-corners;
}//sass最终生成:

.notice {background-color: green;border: 2px solid #00aa00;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}

在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius全部来自rounded-corners这个混合器。这一节将介绍使用混合器来避免重复。通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

给混合器传参

混合器并不一定总得生成相同的样式。可以通过在 @include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像:

@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写:

a {@include link-colors(blue, red, green);
}//Sass最终生成的是:a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可:

a {@include link-colors($normal: blue,$visited: green,$hover: red);
}

尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。

转载于:https://www.cnblogs.com/mmzuo-798/p/11309560.html

常忘知识点二-混合器相关推荐

【2023校招刷题】笔试及面试中常考知识点、手撕代码总结
文章目录一.笔试/面试常考知识点二.面试常考手撕代码 2.1.基本电路设计 2.2.复杂电路设计 2.3.跨时钟域设计一.笔试/面试常考知识点奇.偶.小数分频 [Verilog基础]分频器实现 ...
【转】常用常忘的iOS知识点搜集
原帖地址: iOS小技巧总结,绝对有你想要的原作者:iOS_小松哥十分拜服!这里先手抄一份,会陆续把自己整理的知识点也加进来. iOS开发中常遇到小的知识点,常用常忘,特此集中记录以备查阅. 1. ...
教师资格证计算机考察知识点,教师资格证考试信息技术常考知识点同步练习题.docx...
教师资格证考试信息技术常考知识点同步练习题一.信息的定义及特征 ( 一) 信息定义信息是通过文字.数字.图像.图形.声音.视频等方式进行传播的内容. 说明:信息定义考查的方式有两类:一类是选出四个 ...
中原工学院计算机二级证书,中原工学院@计算机等级考试二级MS_Office基础知识(常考知识点记忆).doc...
中原工学院@计算机等级考试二级MS_Office基础知识(常考知识点记忆)剖析计算机的发展.类型及其应用领域.计算机(computer)是一种能自动.高速进行大量算术运算和逻辑运算的电子设备. 速度 ...
科目一常考知识点速记技巧汇总（2022全新版）
目录驾考模拟练习:元贝驾考2022科目一_元贝驾考科目一_元贝驾考2022科目一模拟考试驾考一点通官网_科目一模拟考试2022最新版_驾考宝典2022科目四_驾照考试科目一驾驶员试题网_专注驾驶 ...
三本类计算机行色专业,高考倒计时50天：物理34个易错易忘知识点
今天是4月18日,距离2016年高考(微博)还有50天. 今天的内容有四部分:第一部分:高招小贴士:第二部分:2016年高校招生政策,今天介绍天津大学(微博)2016年的招生政策:第三部分:高考志愿填 ...
迎难而上，2023Java面试突击指南手册。整合了各大技术栈常考知识点。
上周我接到一位粉丝的私信说目前互联网形势实在对他太不友好,感觉自己每个技术栈都会一点,但不是完全精通.基本二面三面的时候就挂了,已经完全不知道该朝哪个方向努力了,希望可以给他一些建议和方法指导.那么, ...
计算机二级考试中常考的知识点,计算机二级office常考知识点(2)
7. 因特网网络服务的概念.原理和应用. 二.Word的'功能和使用 1. Microsoft Office应用界面使用和功能设置. 2. Word的基本功能,文档的创建.编辑.保存.打印和保护等基本 ...
JAVA面试常考系列二
转载自 JAVA面试常考系列二题目一解释一下线程和进程进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调 ...
会计电算化常考题目二
会计电算化常考题目二 1.IP地址 2.设置会计科目代码的要求 3.关于"记账" 4.结算方式的设置 5.复制-粘贴 6.我国会计电算化的发展阶段 7.影响计算机系统安全的主要因素 ...

常忘知识点二-混合器

混合器

给混合器传参

常忘知识点二-混合器相关推荐

最新文章

热门文章