Less是一门预编译语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展
Less也扩充了CSS语言,增加了诸如变量、混合运算、函数等功能。Less既可以运行在服务端(Node.js和Rhino平台)也可以运行在客户端(浏览器)
VSCODE可以使用Easy LESS插件(将less文件在编译后生成css文件)
Less的使用
注释
//这种注释,在编译后不会出现在CSS文件上
/*这种注释在编译后会出现在CSS文件上*/
使用Easy LESS的情况下,编译less文件会生成对应的.css文件,在普通html文件中引用时,引用生成的.css文件
Less变量
//使用值变量定义公共样式(便于统一修改样式)
@color:#999;
@bgcolor:skyblue;
@width:50%;
#wrap{
color:@color;
background-color:@bgcolor;
width:@width;
}
1.选择器变量
2.属性变量
3.url变量
4.声明变量
5.变量运算
6.变量作用域
跟js中变量的就近原则是一样的
7.用变量去定义变量
Less嵌套
&和嵌套的妙用
<body><div class="center"><ul id="list"><li>1</li><li>2</li><li>3</li></ul></div></body>
媒体查询
混合方法
1.无参数方法
2.默认参数方法
Less可以使用默认参数,如果没有传参数,也将使用默认参数
@arguments犹如js中的arguments指代的是全部参数
传的参数中必须带着单位
3.方法的匹配模式
匹配匹配程度最高的函数,同时匹配参数全是变量的函数
4.方法的命名空间
5.方法的条件筛选
less中没有if-else,但是有一个when方法
要点:
1.比较运算符:>、>=、=、<=、<
2.=代表的是等于
3.除去关键字true以外的值都被视为false
6.数量不定的参数
7.方法使用important!
8.循环方法
9.属性拼接方法
拼接的过程中+代表,
+_代表空格
10.实战技巧
继承
1.extend关键字的使用
extend是Less的一个伪类,它可以继承所匹配声明中的全部样式
2.all全局搜索替换
3.减少代码的重复性
从表面上看,extend与方法最大的差别是extend是同个选择器共用一个声明,而方法是使用自己的声明,这无疑增加了代码的重复性
导入
直接导入
在less文件中可以导入其他的less文件
@import "nav.less";
reference
Less中最强大的特性,使用引入的Less文件,但不会编译它
@import (reference) "nav.less"
once
@import语句的默认行为。这表明相同的文件只会被导入一次,而随后导入的文件的重复的代码都不会解析
@import (once) “foo.less”
multiple
导入多个同名文件,重复生成样式
@import (multiple) "foo.less"
@import (multiple) "foo.less"
条件表达式
类型检测函数
1.检测值的类型
2.iscolor
3.isnumber
4.isstring
5.iskeyword
6.isurl
单位检测函数
1.检测一个值除了数字是否是一个特定的单位
2.ispixel
3.ispercentage
4.isem
5.isunit
函数
函数库
less中封装了非常多的函数库,例如颜色定义,颜色操作,颜色混合,字符串处理等等
less函数手册