1 介绍
less是一个css预编译语言
可以解决css无法复用样式,权重问题,无法计算,无法使用语句,没有方法,单位转换等等问题
Github:http://github.com/less/less
官网:http://lesscss.org/
中文官网:http://lesscss.cn/
2 编译less
安装less
npm install less -g
npm install less --save-dev
此时得到一个全局的lessc指令,可以通过lessc -v查看版本号
浏览器不认识less语言,所以我们要将less编译成css
lessc编译less: lessc ./demo.less ./demo.css
webpack编译
在webpack看来,less文件也是资源,因此也可以模块化加载
要安装less加载机less-loader,less文件默认扩展名是.less
匹配less文件:test: /\.less$/
由于less最终编译成css,因此也需要css加载机:rules: 'style-loader!css-loader!less-loader'
3 嵌套套语法与&
嵌套式语法
使用预编译语言最大的特点就是可以使用嵌套式语法,也就是说直接在一个选择器中使用另一个选择器并书写样式
编译的时候会将内外选择器同时保留
外部选择器类似命名空间,确保选择器名称不会相互覆盖
嵌套的时候,我们可以通过&符号获取当前选择器
div {
p {
color: red;
font-size: 30px;
}
a {
color: green;
font-size: 30px;
text-decoration: none;
}
&:hover {
color: red;
}
}
4 变量
less支持变量,定义的语法跟js语法相似
@key: value;
@相当于var,是变量的标志
key表示变量名称(符合js变量命名规范)
:相当于赋值符号
value表示值
;表示语句结束
@color: #f00;
@bg: #00f;
@space: 40px;
div {
padding: @space/2 @space*1.5;
font-size: @space;
background: @bg;
span {
color: @color;
margin: 0 @space/2;
}
}
5 运算
less支持数学运算,并且会做单位转换
加减法:保留第一个加数或者被减数的单位
乘法:保留第一个乘数的单位
除法:保留第一个单位
6 混合
混合的作用就是为了复用选择器的样式
在less中,支持两类混合:类混合和id混合
定义混合:定义这些选择器
使用混合:直接写这些选择器
在选择器内部使用混合的时候,想覆盖继承下来的样式一定要注意选择器的权重
less中的混合在编译的时候保留(变量会删除),混合继承的样式不会合并选择器
.box1 {
background-color: pink;
.text {
color: red;
font-size: 30px;
}
#demo {
color: green;
font-size: 40px;
}
a {
color: gold;
font-size: 40px;
}
}
.box2 {
.text {
.box1 .text;
}
.text,
#demo {
color: yellowgreen;
}
}
7 方法
方法跟混合一样,都是为了复用选择器的样式
混合在编译的时候会保留
方法在编译的时候会删除
如果想要将复用放入眼视光hi,在编译的时候删除,我们可以使用方法
如果复用的样式是可变的,我们可以使用方法
定义方法的语法跟js中定义方法的语法类似
.方法名称(@arg1, @arg2) {
// 定义样式
}
.相当于function用来定义方法
方法名称跟js中方法命名规范一致(但less可以使用-)
()表示参数集合,可以定义参数
@arg1, @arg2表示参数
{}表示方法体,我们可以定义样式
使用方法:.方法名称(arg1, arg2);
默认参数:.方法名称(@arg: value, @arg2: value2) {}
定义默认参数的语法跟定义变量的语法类似
如果定义了默认参数,使用方法的时候,可以不传递参数
如果没有定义默认参数,使用方法的时候,必须传递参数
获取所有参数:我们可以通过@arguments获取所有的参数
!important:如果对方法使用!important关键字,此时方法中的每一个样式都会提高权重
.arrow(@w: 10px, @c: #000, @dir: top) {
border: @w solid transparent;
border-@{dir}-color: @c;
font-size: 0;
width: 0;
}
span {
border: 20px solid transparent;
border-right-color: red;
font-size: 0;
}
h1 {
border: 30px solid transparent;
border-top-color: green;
width: 0;
}
strong {
.arrow(50px, green, left);
}
8 插值,引入文件
插值语法:插值语法@{key}
js中插值:是为了复用字符串,less中插值:为了复用样式
在less中,有三种情况下可以使用插值语法
1 在字符串中可以使用插值
2 在选择器上可以使用插值
3 在样式属性名称上(key)可以使用插值
less引入文件,跟css引入文件相似,有两种方式
1 css方式引入:@import url()
2 直接引入:@import 地址
被引入的文件中,之建议写方法和变量,其它的选择器会被复制多次
9 内置方法
字符串方法:e避免less编译的
数学方法:js中数学对象支持的,less也支持
ceil向上取整, floor向下取整, round四舍五入, max, min, percentage(求百分数)
定义色彩方法:rgb, rgba, hsl(hue, saturation, lightness)
hue色相0-360 saturation饱和度0-100% lightness亮度0-100%
色彩通道方法:red, green, blue, alpha, hue, saturate, lightness
色彩操作方法:fadeIn, fadeOut, fadeTo, saturate, desaturate, lighten, darken
最小值是0,最大值是100%
色彩混合方法 softLight, hardLight
10 条件语句
less不支持if条件语句,但是我们可以通过方法来模拟:.方法名称() when() {}
when关键字就是用来定义该方法的适用条件的
两个变形
且条件 .方法名称() when() and () {}
非条件 .方法名称() when not () {}
支持比较运算符(跟js一样,但是'等于'有变化):>, >=, <, <=, =
注意:less中的等于比较运算符用'=‘,比较的时候,不需要带单位
在js中,满足了一个条件就不会执行else后面的了
在less中,所有的方法,只要满足条件,都会执行,并且后执行的会覆盖先执行的
.wcenter(@w: auto, @mt: 0, @mb: @mt) {
width: @w;
margin: @mt auto @mb;
background-color: red;
}
.wcenter(@w: auto, @mt: 0, @mb: @mt) when (@w > 500) {
width: @w;
margin: @mt auto @mb;
background-color: green;
}
.wcenter(@w: auto, @mt: 0, @mb: @mt) when (@w >= 200) and (@w <= 500) {
width: @w;
margin: @mt auto @mb;
background-color: gold;
}
.wcenter(@w: auto, @mt: 0, @mb: @mt) when not (@w > 200) {
width: @w;
margin: @mt auto @mb;
background-color: pink;
}
.box1 {
.wcenter(600px);
}
.box2 {
.wcenter(300px);
}
.box3 {
.wcenter(100px);
}
11 作用域
less提供了块作用域,一对{}定义了一个模块,创建一个作用域
作用域内部的数据,外部无法访问
选择器表示该模块的名称,我们称之为命名空间
在外面的我们称之为全局环境
在{}内部的我们称之为局部环境
我们讨论变量,混合,方法在全局环境,以及局部环境下的使用情况
变量
全局的变量,任何模块都能使用
局部的变量,当前模块可以使用,其它的模块无法使用
混合
全局的混合,任何模块都能使用
局部的混合,当前模块可以使用,其它模块无法使用,但是可以通过命名空间使用
方法
全局的方法,任何模块都能使用
局部的方法,当前模块可以使用,其它模块无法直接使用,但是可以通过命名空间使用
less中的变量,混合,方法都支持声明前置,所以,我们尽量将变量,方法都定义在最前面。通常我们将他们定义在一个文件(公共模块文件,里面定义配置变量,以及工具方法)中,再引入。
如果被引入的文件中,定义了混合,会被复制多次(造成资源的浪费)
.size() {
width: 100px;
height: 50px;
}
.box1 {
.demo() {
font-size: 20px;
color: red
}
.size();
.demo();
}
.box2 {
.size();
.box1 .demo();
}