少儿学习指南第 3 期 [重要] | 混合与遗传

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

LESS是一个CSS预处理器，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。这个系列主要就是学习并且巩固 Less 的基础知识，并且掌握一些更加高级的用法，用以提高开发效率。

前期回顾

less学习指南第一期 | 嵌套和变量
less学习指南第二期 | 运算和内置函数

混合（Mixin）

混合就是一种或者一系列属性从一种规则集引入（混合）到另一种规则集的方法

普通混合

就是直接继承其他选择器中的样式；

调用方式

没有参数，所以可加括号，也可不加括号；

//为了避免代码混淆，建议都加括号
.选择器()
.选择器   

类似自定义函数的混合

我们可以定义好一系列常用的样式，要用的时候可以直接通过定义名称去调用，还可以带参数调用，大大减少了代码书写量。 相当于自定义函数。

声明

• 无参数定义

.混合名() {

封装的css代码

}

• 有参数定义

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

封装的css代码

}

调用

.选择器{

.混合名(@参数)

}

示例

无参调用

要和上面【Mixin直接继承其他选择器中的样式】区别开来

• 直接继承类，被继承的类会被正常编译；

• 这种混合的方法，要被调用才会被编译；

传参调用

编写less的时候方便改样式；

默认值

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

• 如果不设置默认值,MIxin的值在没有参数的情况下就会报错。

• 传参时实参的个数必须与设置的默认值的个数相等。

命名参数

直接传入形参的值

Mixin里定义变量

其他（了解）

包含 !important 关键字的 Mixins 如果在 Mixins 后面标记 !important 关键字，则 Mixins 内的所有属性均会添加 !important 关键字。

@arguments变量

@arguments变量代表所有可变参数，参数的先后顺序是你写的（）里的先后顺序；

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

Mixin里返回Mixin（了解）

在Mixins中不管是定义变量还是定义Mixins，都仅对调用者可见。例如在一个Mixins中定义了一个变量，只有在引用了这个Mixins的样式类中，才能够使用这个变量，否则会导致报错。

继承（extend）

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。

• less继承方便代码模块化，可以减少很多重复的代码
• 继承不支持带参数

extend 关键字的使用

语法

//写法一
.获得继承的名:extend(.被继承部分名){…}
.content:extend(.box){}

//写法二
.获得继承的名{
   &:extend(被继承部分名)
}
.box{
  &:extend(.animation);
}

如果忘了&的用法，则去????less学习指南第一期 | 嵌套和变量回顾一下【嵌套】里的【父选择器】

示例一

从下例中可以看到，extend 会把 .box 的选择器应用到 .content 样式类上，.box 原本定义的样式保持不变。

示例二

更复杂一点的

all 全局搜索替换

使用选择器匹配到的 全部声明。

语法

//就是多加一个all

.获得继承名:extend（.继承部分名 all）{…}

.footer:extend(.box all){}

示例一

可以看到footer继承了box的hover，但是header没有；

示例二

加all之后，嵌套的也会被继承

其他（注意）

1、 选择器可以包含多个伪类，但是 :extend() 必须位于末位。

div:hover:extend(span)

2、选择器和 :extend() 之间可以有空格。

div :extend(span)

3、选择器可以多次继承。

div:hover:extend(.box):extend(.color){}
//等同于
div:hover:extend(.box, .color) {}

4、如果是多元素选择器，则每个选择器都可以加:extend;

如以下示例，div继承了box,span继承了color，div和span还有自己的样式；

5、:extend可以匹配嵌套选择器；

.title:extend(.box .bg)

注意和all的区别

6、:extend()中被继承的选择器名称不能是变量

7、:extend()没有重复检测，所以不要重复定义

如以下，让box，继承了div，又继承了span，结果.box出现了两次

Mixin和extend的区别

Mixin和extend都可以减少代码的重复性；

但是

• extend 是同个选择器共用同一个声明，而 Mixin 是使用自己的声明
• extend不带参数，Mixin可以带参数；

简单的理解就是：
Mixin更灵活点，可以传参，可以匹配,也可以直接继承别人的样式（相对extend性能消耗会大一点）；
extend相当于复制一份别人的样式，就是对公共样式的一种封装（编译起来快，性能高）。

Mixin

extend

两个平时用的时候怎么选？

首先肯定是根据具体场景选用，如果实在不知道用哪个好的话，就：

如果【复用的代码不用出现在编译后的代码】中，使用Mixins，反之使用 :extend()。

结语

下期预告：less学习指南第四期 | *****

参考：
less官网
less Variables

---

????‍♀️????‍♀️????‍♀️点赞召唤下一期！????‍♀️????‍♀️????‍♀️