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

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

嵌套

可以在选择器里面嵌套另外一个选择器去书写样式；

🌺 后代选择器（常用）

后代选择器的嵌套就是，在选择器里面直接在写一个选择器；

🌺 子元素选择器

子元素选择器就是在，子选择器前面加上>符号

如果忘了什么是后代，什么是子代，那就去文档上复习一下👉 CSS 子元素选择器和CSS 后代选择器

🌺父选择器（&）

🍀 同级类的表达（.box.color）

『小贴士』

后带选择器不带空格，即表示同级类；

什么是同级类？

🍀 伪类的表达(a:hover)

🍀 产生统一类名

有的时候我们希望类名保持统一，比如都是表示按钮的样式；

🍀 多个选择器

&代表所有父选择器（不仅仅是最近的祖先）

🌺 媒体查询

替代：@media screen and (min-width:1080px){}

变量

可以单独定义一系列通用样式去调用，有利于全局样式修改。

🌺 属性值变量（常用）

这是最简单和常用的方式，比如在全局换肤颜色和公共组件的css样式的时候；

『写法』

//声明
@变量名：值

//使用
属性：@变量名

🌺 属性名称变量

//声明
@变量名：值

//使用
@{变量名}

🌺 整个属性作为变量

//声明
@name: {属性:值;}

//使用
@name();//就像使用方法一样

🌺 选择器变量

选择器的名称也可以使用变量

//声明
@变量名：值

//使用
.@{变量名}
#@{变量名}

🌺 URL变量

//声明
@变量名：值

//使用
url("@{变量名}/图片名称")（注：变量即路径）

🌺 变量在@import语句中的使用

//声明
@变量名：值

//使用
@import "@{变量名}/路径名"

🌺 变量作为变量名使用

可以使用变量定义另一个变量的名称

下图案例分析：
@color = primary;
@@color = @primary；
@primary = lightblue;

🌺 变量的Lazy Evaluation和作用域

变量在使用之前可以不必声明，可以在使用之后声明；

下图案例分析：
@width = @a = 60px; //可以看到后面的变量会覆盖前面声明的变量（当前范围向上搜索）；
@height = @b = 50px;//如果存在局部变量，则将会先引用局部变量；

变量引用优先级：

局部变量 > 后面的变量 > 前面的变量

🌺 属性作为变量使用（$prop语法）

使用$prop语法可以把属性当作变量来使用（v3.0.0新增的）

这个的作用域和变量的同理

🌺 默认变量

如果你给变量设置了默认值，在后面可以通过重新定义来覆盖；

『注意』如下图，如果在library文件里定义并使用了@base-color；

在引用的时候，又重新定义了@base-color；

则@dark-color使用的是最新定义的@base-color；

结语

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

参考：
less官网
 less Variables

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

less学习指南第一期 | 嵌套和变量

嵌套