目录

1.混合(Mixin)

1.1 Mixin的定义

1.2 Mixin的定义

1.3 调用混合

1.4 less可以直接继承在其他选择器中的样式

1.5 Mixin的默认值与不定参

1.6 Mixin的判断条件

1.7 模式匹配

2.嵌套(重要)

2.1 嵌套的定义

2.2 使用嵌套的优势

2.3 使用示例

---

1.混合(Mixin)

1.1 Mixin的定义

Mixin在less官网中的定义为:混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

但我感觉这个说法有点难理解,我们可以简单的理解就是函数,可以封装CSS代码,在别的选择器中调用,提高代码的重用性和可维护性.

Mixins 有点像函数,在定义后,可以通过名称调用.(也支持动态传参)

混合可以将一个定义好的class A 轻松 的引入到另一个class B 中,从而简单实现class B继承class A 中的所有属性,我们还可以带参数地调用,就像使用函数一样

先看一个简单的示例:

.color {background-color:#58a;color:18px;
}

应用这个类(class)

.box {width:100px;height:50px;.color();
}
​
.wrap {width:100px;height:50px;border:1px solid red;.color();
}

通过这种方式就可以将color这个类应用到.box和.wrap中了..

接下来我们来详细的看一下Mixins的定义与调用等的具体方法.

1.2 Mixin的定义

混合有两种定义方式,一种是参数的定义,另一种是有参数的定义.

• 无参数的定义

.混合名() {

封装的css代码

}

• 有参数的定义

.混合名(@参数1:参数的默认值,@参数2:参数的默认值......) {

封装的css代码

}

1.3 调用混合

语法

选择器{

混合名(@参数)

}

// 使用混入
@baseColor: #369;
.box p {.error(@baseColor, 30px)
}

调用示例

值得注意的是在没有参数的情况下,不加括号也可以调用.

.size {width: 100px;height: 100px;border:1px solid green;
}
​
#box{.size(); //加括号调用background-color: #58a;
}
​
.wrap {.size; //没有参数的情况下不加括号也可以background-color: skyblue;
}

如果Mixin需要动态参数,则必须加括号传参:

.init(@width,@height,@color) {width:@width;height: @height;color:@color;
}
@width:200px;
@height:200px;
@color:red;
.box1{.init(@width, @height, @color);background-color: skyblue;
}
.wrap {.init(300px,100px,red);border:1px solid blue;
}

结果如下:

 

1.4 less可以直接继承在其他选择器中的样式

.box {width:100px;height:100px;color:white;
}
.wrap {.box; //.wrap会直接继承.box中已写的样式backgorund-color:blue;
}

 Mixin中除了写样式选择器,还可以写变量

//Mixin里除了可以写样式,选择器, 还可以写变量
.mixin() {@width:  100%;@height: 200px;
}
​
.box1 {.mixin();width:  @width;height: @height;border:1px solid red;
}

Mixin除了返回变量,还可以返回Mixin. 

// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){.wrap(){width:500px;height:100px;background:@color;}
}
​
.box1{#box(red);  // 执行第一个Mixin是为了能够使用里面的Mixin.wrap();   // 第二个执行Mixin里面的Mixin
}

3.5 可以在Mixin中使用选择器

.hover(@color){&:hover{background:@color;}
}
.wrap{width: 100px;height: 100px;background: red;&:hover > span{  //注意在此处的&与冒号之间不能有空格,等价         于.wrap:hover >spanbackground:skyblue;}// .hover(skyblue)    //如果只是当前元素添加hover效果,而不是给当前元素的子元素或兄弟元素添加,那么&可省略}

单独为box元素添加hover样式

.hover(@color){&:hover{background:@color;}
}
.box1{width: 200px;height: 200px;margin-top:20px;background: skyblue;
​&:hover{background:red;}// .hover(red);   //上下两种弄方式等效
}

1.5 Mixin的默认值与不定参

• 默认值:

mixin中可以使用默认值,如果在没有传入参数的时候,则会使用默认值.

如果不设置默认值,MIxin的值在没有参数的情况下就会报错,且传参时实参的个数必须与设置的默认值的个数相等.

.size(@width : 100px, @height : 100px , @color : pink){width: @width;height: @height;background-color: @color;
}
.box1 {.size(50px,50px,#58a);   //使用自己所传入的参数border:3px solid pink;
}
.wrap {.size;   //使用已经设置的默认参数color:#fff;
}

• 不定参

​...就是@reset剩余参数,会将剩余的所有参数都加到@arguments中

// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里 
.boxShadow(...){box-shadow: @arguments;
}
​
.box1{
.boxShadow(1px,4px,30px,red);
}
​
// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){box-shadow: @arguments;
}
.wrap{
.boxShadow( 50px,1px,4px,30px,red);
}

编译成css之后的结果:

.box1 {box-shadow: 1px 4px 30px red;
}
.wrap {box-shadow: 50px 1px 4px 30px red;
}

​

1.6 Mixin的判断条件

Less没有if / else 但是less具有一个when，and，not与“，”语法。

1. when 表示 在使用Mixin的时候必须满足 when后面的条件

#box(@width, @height, @color) when (@width > 100px){width: @width;height: @height;background-color: @color;
}
​
.box{#box(101px,50px,pink)
}

2. 如果有两个必须同时满足的条件,使用 and

// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){width: @width;height: @height;background-color: @color;
}
​
.box{#box(100px,50px,skyblue)
}

3. 如果需要排除某个条件才能使用Mixin,使用not

// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when  not (@color = pink){width: @width;height: @height;background-color: @color;
}
​
.box{#box(100px,50px,skyblue)
}

4. 如果需要多个条件只要满足一个就执行Mixin,使用 逗号,

// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){width: @width;height: @height;background-color: @color;
}
​
.box{#box(50px,50px,skyblue)
}

1.7 模式匹配

根据条件进行样式显示,类似JS中的switch,有些情况下,我们想根据传入的参数来改变混合的默认呈现.

比如:

相当于定义一个相同的混合名称,根据传入其他混合名称的不同,执行不同混合分,但是有一个公共的分支,任何一个分支都会调用

@_ 表示匹配所有,通常用于定义公共部分

语法:

模式匹配的定义

公共部分

.fun (@_, @color){

// 任何分支都会执行的公共部分

}

.fun( s1,@color){

// s1 分支独有代码

}

 

模式匹配的使用

h1{

.fun(s2, @color)

}

// 三角形公用代码
.sjx(@_, @color, @size) {width: 0;left: 0;display: block;border: @size solid transparent;}// 左三角形.sjx(l, @color, @size) {border-left-color: @color;}// 右三角形.sjx(r, @color, @size) {border-right-color: @color;}// 上三角形.sjx(t, @color, @size) {border-top-color: @color;}// 下三角形.sjx(b, @color, @size) {border-bottom-color: @color;}.trangle1 {.sjx(t,#00a8ff, 20px)  //通过传入不同的参数来产生不同方向的三角形}.trangle2 {.sjx(b, pink, 20px)}.trangle3 {.sjx(r, purple, 20px)}.trangle4 {.sjx(l,#4cd137, 20px)}

 

2.嵌套(重要)

2.1 嵌套的定义

具有层级关系的CSS样式,CSS的层级是有HTML的结构决定的.

2.2 使用嵌套的优势

1. 用在具有后代关系和父子 关系的选择器中

2. 减少代码量,

3. 代码结构更加清晰

2.3 使用示例

.border {border:1px solid #58a;
}
.container {width: 200px;height: 300px;.border();ul {list-style: none;padding:0;margin:0;.border();li {width: 100px;height: 80px;background-color: khaki;margin-top:20px;span {font-size: 20px;color:green;}}}.box {width: 200px;height: 50px;.border();margin-top:30px;background-color: lightcoral;}
}

编译之后的css代码:

.border {border: 1px solid #58a;
}
.container {width: 200px;height: 300px;border: 1px solid #58a;
}
.container ul {list-style: none;padding: 0;margin: 0;border: 1px solid #58a;
}
.container ul li {width: 100px;height: 80px;background-color: khaki;margin-top: 20px;
}
.container ul li span {font-size: 20px;color: green;
}
.container .box {width: 200px;height: 50px;border: 1px solid #58a;margin-top: 30px;background-color: lightcoral;
}

​