什么是Mixin

Less中，允许你将一个类嵌入到另一个类中，被嵌入的类也可以看作变量。换句话说，你可以用一个类定义样式，然后把它当作变量，在另一个类中，只要引用变量的名字，就能使用它的所有属性，

Less把这种特性称作 mixin，中文把翻译为“混入”或“混合”，其目的就是从现有的样式中添加属性。请看以下Less代码：

1. .bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }

上述代码中，.bordered 定义了一个属性集。然后，在任何需要使用 .bordered 属性集的选择器中，只需像下面这样调用就可以了：

1. #menu a {
2.   color: #111;
3.   .bordered;
4. }
5. .post  a {
6.   color: red;
7.   .bordered;
8. }

这样一来，.bordered中定义的属性集，就会在 #menu a 和 .post a 中体现出来。编译后的CSS代码为：

1. .bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   border-top: dotted 1px black;
8.   border-bottom: solid 2px black;
9. }
10. .post  a {
11.   color: red;
12.   border-top: dotted 1px black;
13.   border-bottom: solid 2px black;
14. }

从上面的代码可以看出：mixin 其实就是一种嵌套，简单的讲，mixin 就是规则级别的复用。除了类选择器外，你也可以使用 id 选择器来定义 mixin。如：

1. #bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   #bordered;
8. }

编译后的CSS代码为：

1. #bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   border-top: dotted 1px black;
8.   border-bottom: solid 2px black;
9. }

从上面的代码可以看出，使用 class、id 定义mixin 时，mixin的定义会被原封不动的输出到编译生成的CSS代码中。

如果希望编译生成的CSS代码中不包含mixin的定义，在定义 mixin时，只需在 class、id 的后面添加一对小括号即可。而在调用时，小括号是可选的。如：

1. #x() {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   #x;
8. }

编译后的CSS代码为：

1. #menu a {
2.   color: #111;
3.   border-top: dotted 1px black;
4.   border-bottom: solid 2px black;
5. }

最新文章

1. 记录一则ORACLE MOVE操作后重建索引过程被强制中断导致的ORA-8104案例
2. Objective-C总Runtime的那点事儿（一）消息机制
3. Python生成器的经典程序
4. [COJ0528]BJOI幸运数
5. H5测试区别与PC端测试关注点
6. [LeetCode] Range Sum Query 2D - Immutable
7. PHP基础14：$_REQUEST
8. safari的坑
9. iOS 进阶 第十四天(0416)
10. Servlet3.0学习总结(四)——使用注解标注监听器(Listener)
11. HADOOP在处理HIVE时权限错误的解决办法
12. 经常使用Log日志打印输出
13. Citrix 服务器虚拟化之三 Xenserver 网络管理
14. 5.spark弹性分布式数据集
15. Java温故而知新-空心菱形
16. Angular整合zTree
17. 基础环境系列：Apache2.4.37
18. ubuntu16.04 在线安装docker ce
19. Python中pandas dataframe删除一行或一列：drop函数
20. POJ2485:Highways(模板题）

热门文章

1. Linux入门(17)——Ubuntu16.04显示内存CPU网速等（System Monitor）
2. Redis 学习笔记-应用场景
3. 如何通过C#操作Access，本人亲测通过
4. LeetCode 280. Wiggle Sort （摆动排序）$
5. 转载——yum源的超级简单配置
6. hadoop命令
7. 利用quartz实现定时调度
8. CIFAR-10 dataset 的下载与使用
9. Luogu P2183 巧克力
10. 淘宝轮播JS