Less学习系列之Mixins混合

系列文章目录

一：Less学习系列之extend继承
二：Less学习系列之Mixins混合
三：Less学习系列之匹配模式（Mixins混合的一种形式）

---

---

一、Mixins的初步理解

Mixins可以理解为混合，就是将一个样式集混入到另一个样式集当中

二、Mixins的几种使用形式

1. 基本的混合形式

/*less代码*/
.size{
    width:100px;
    height:100px;
}
.style(){
	color:#fff;
	backkground:#409eff;
}
.wrap{
    .size();
    &::hover{
		.style() !important;
	}
}

/*编译后的代码*/
.size {
  width: 100px;
  height: 100px;
}
.style {
  color: #fff;
  backkground: #409eff;
}
.wrap {
  width: 100px;
  height: 100px;
}
.wrap::hover {
  color: #fff !important;
  backkground: #409eff !important;
}

.size就是一个Mixins，从编译结果来看，.size中的内容全部被混入了.wrap中
(1)：&是less中的语法，代表自身，如果想在自身的样式集中使用伪类，就可以使用&
(2)： 区别一下.style(){}和.size{}，在混合后加上()，编译时混合的内容就不会输出
(3)：important关键字加在混合之后，混合中的每一个属性都会加上important

2. 带参数的混合形式

(1). 形参不带默认值

.size(@w,@h){
    width:@w;
    height:@h;
}
.wrap{
    .size(100px,100px);
}

/*编译后的代码*/
.wrap {
  width: 100px;
  height: 100px;
}

不带默认值的形参在使用时必须传入对应的实参，否则会编译失败

(2). 形参带默认值

.size(@w:100px,@h:100px){
    width:@w;
    height:@h;
}
.wrap{
    .size(200px,200px);
}
.inner{
	.size();
}

/*输出结果*/
.wrap {
  width: 200px;
  height: 200px;
}
.inner {
  width: 100px;
  height: 100px;
}

(3). 命名参数

存在形参的混合，设置默认值后，如果只想使用其中的一个参数，那么可以使用指定参数的形式

.size(@w:100px,@h:50px){
    width:@w;
    height:@h;
}
.wrap{
    .size(@w:100px);
}

/*编译后的代码*/
.wrap {
  width: 100px;
  height: 50px;
}

(4). 匹配模式

匹配模式在实际开发中的用途比较大，在我的另外一篇文章中有所解释
附：Mixins混合的匹配模式学习

(5).@arguments变量

less中@arguments变量和普通函数中的arguments变量有点相似，代表所有的实参的集合

.box-shadow(@x,@y,@w,@blur,@color,@direction){
	box-shadow:@arguments;
}

(6).剩余参数

@arguments变量代表的是传入的所有参数，而...表示可变数量的参数，配合变量名使用

情景一：存在其他变量 + ...

.style(@color;@rest...){
    color:@color;
    box-shadow:@rest;
}
.wrap{
    .style(#409eff;10px;10px;10px;10px;#f40;inset);
}

.wrap {
  color: #409eff;
  box-shadow: 10px 10px 10px 10px #f40 inset;
}

情景二：只有... 这种情况下和@arguments的用法一致

.style(@rest...){
    box-shadow:@rest;
}
.wrap {
  box-shadow: 10px 10px 10px 10px #f40 inset;
}

.wrap {
  box-shadow: 10px 10px 10px 10px #f40 inset;
}

@rest是变量名，可以自己定义

三、Mixins和:extend()使用的区别

Mixins和:extend()在功能上比较相似，但:extend()继承的样式集最后都会被编译到文件中去，而Mixins可以在混合名称后加上()，避免编译后的代码输出到文件中。如果不想代码输出到文件中就可以使用Mixins