Less学习笔记

一、Less介绍

• Less是一门向后兼容的 CSS 扩展语言，相当于CSS的库，在CSS基本语法的基础上，增加了一些CSS所没有的功能。
• 浏览器并不能直接解析Less，需要通过预处理工具将Less编译成CSS才可以解析。
• 学习Less，可以增加代码的复用性、可维护性，提高开发效率。
• 像Less这种库，还有很多，比如Sass、Styus等。

二、Less的使用

1.安装预处理插件Easy Less

2.引入

在安装了Easy Less插件后，我们新建.less文件，在里面写样式，目录就会自动生成.css文件。我们在html文件中引入.css文件即可。

<link rel="stylesheet" href="css文件路径">

三、Less的语法

1.注释

-//这种注释编译后将不会出现在css文件中
-/**/这种注释编译后会出现在css文件中

2.变量

通过 @变量名: 值; 定义变量，后面代码中都可以直接使用，利于样式复用和代码维护。(建议定义变量放在代码开头)
(1)选择器变量
选择器变量就是把选择器定义成变量。

@变量名: 选择器;
@{变量名} {
    ......
}

(2)属性变量

@变量名: 值;
选择器 {
    属性名: @变量名;
}

(3)url变量

(4)声明变量

• 结构: @变量名: {属性: 值}
• 使用: @变量名()

(5)变量运算

在连接运算的时候，注意添加空格，避免变量找不到的报错

(6)变量作用域

就近原则

(7)用变量去定义变量

3.嵌套

(1)&符和嵌套

&表示上一层选择器

less不再像css一样需要带一堆祖先选择器，可以通过{}嵌套表明选择器之间的层级关系

(2)媒体查询

在css中，我们使用媒体查询，需要将一个元素分开写，而less则支持把一个元素在各种媒体下的样式写在一块。

4.混合方法

(1)无参数方法

• .和#都可以作为方法的前缀
• ()写不写都行，看个人习惯，建议写，把选择器和方法区分开来

小声哔哔一下，感觉无参数的方法用起来效果跟声明变量差不多。
(2)默认参数方法

传入了参数的时候使用传入的参数，没有传入参数的时候使用默认参数。

(3)方法的匹配模式

方法的结果根据传入的参数进行匹配。

(4)方法的命名空间

• >选择器，选择的是儿子元素，就是与父元素有直接血缘关系的元素
• 如果使用>选择器，父元素不能加括号()
• 不能单独使用命名空间的方法，必须先引入命名空间，才能使用其中的方法
• 子方法可以使用上一层传进来的方法

(5)方法的条件筛选

(6)数量不定的参数

(7)!important

使用方法的时候在方法后面加上!important，就会使该方法内的所有属性都加上!important，提高权重。

(8)循环方法

less本身是没有for循环的，但是可以通过方法递归实现循环。

(9)属性拼接方法

• +表示css里的逗号
• +_表示css里的空格

5.继承

继承就是把别的选择器的样式复制过来，用的不多，一般还是习惯用方法实现这种功能

(1)extend

(2)extend … all…

6.导入

可以通过@import导入其他样式文件

(1)文件导入

(2)reference

reference引入文件但不编译

(3)once

once重复引入同名文件，只编译第一次的文件，后面的都将忽略

(4)multiple

multiple允许重复引入同名文件，会重复编译

7.条件表达式

(1)带条件的混合

• 比较运算符: >，>=，=，=<， <
• 格式: when() {}

(2)类型检测函数

检测参数类型

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

(3)单位检测函数

检测已一个值除了是数字是否是一个特定单位

• ispixel
• ispercentage
• isem
• isunit

8.函数

Less有很多的函数库，但是使用并不多，需要的时候可以去Less官网查阅(https://less.bootcss.com/)