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

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

前期回顾

运算

less可以进行属性值的运算，例如【宽高】【文字大小】【颜色】等数值和颜色之间的运算；

//写法
在属性值后面接运算符

Less提供了加（+）、减（-）、乘（*）、除（/）算术运算

宽高类

文字大小类

颜色类

在对颜色进行运算时，会忽略 # 号;

Less 在运算时，颜色值会先转换为 rgb 模式，然后再转换为 16 进制的颜色值并返回。
因为是转换为 rgb 模式，而 rgb 的取值范围在 0~255 之间，所以不能超过这个范围的值。

复合属性类

运算符与值之间必须以空格分开 ;
在运算的时候，只要有一个有单位就行,计算的结果以最左侧操作数的单位类型为准;

内置函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

//写法
属性名称：函数名称（属性值，变化量）；

数学函数

ceil 向上取整。
floor向下取整。
percentage将浮点数转换为百分比字符串。
round四舍五入。

sqrt计算一个数的平方根。
abs计算数字的绝对值，原样保持单位。
pow计算一个数的乘方。
mod取余运算。
min最小值运算。
max最大值运算。

还有【字符串函数】、【长度函数】、【类型函数】、【颜色值定义函数】、【颜色值通道提取函数】、【颜色值运算函数】、【颜色值混合函数】，可以自行到官网查看，就不一一列举👉less函数手册

注释

方式一

标准的CSS注释 /**/

会保留到编译后的文件。

方式二

单行注释 //

不会被编译，编译时自动过滤，在编译生成的CSS中没有。

其他

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
重要注释！
*/

文件导入

Less 提供了CSS @import CSS规则的几个扩展，以提供更多的灵活性来处理外部文件。

语法： `@import (keyword) "filename";`

@import 允许多个关键字，必须使用逗号分隔关键字：

@import (optional, reference) "foo.less";

可选项

reference

引入但是不编译，使用@import (reference)导入外部文件，但不会添加把导入的文件编译到最终输出中，只引用。

@import (reference) "common.less";

once

@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) "common.less";
@import (once) "common.less"; // 这句将会被忽略

multiple

使用@import (multiple)允许导入多个同名文件。

@import (multiple) "common.less";
@import (multiple) "common.less";

inline

在输出中包含源文件，但不对其进行处理。

less

无论文件扩展名为什么，都将其视为less文件。

css

无论文件扩展名为什么，都将其视为CSS文件。

Optional

找不到文件时继续编译。

用于 `@import (optional)` 仅在文件存在时才允许导入，

如果没有optional关键字，Less则会在导入找不到的文件时引发FileError并停止编译。

结语

一、二期主要讲的是less的一些基础用法，下期开始将说说【代码重用】的一些用法；

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

参考：
less官网
 less Variables

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

less学习指南第二期 | 运算和内置函数

运算

宽高类