文章目录
- 一、Less介绍
- 二、Less的使用
- 1.安装预处理插件Easy Less
- 2.引入
- 三、Less的语法
- 1.注释
- 2.变量
- 3.嵌套
- 4.混合方法
- 5.继承
- 6.导入
- 7.条件表达式
- 8.函数
一、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)类型检测函数
检测参数类型
iscolorisnumberisstringiskeywordisurl
(3)单位检测函数
检测已一个值除了是数字是否是一个特定单位
- ispixel
- ispercentage
- isem
- isunit
8.函数
Less有很多的函数库，但是使用并不多，需要的时候可以去Less官网查阅(https://less.bootcss.com/)
