定义:
什么是less? less是一个css预处理器,可以为网站启用可自定义、可管理和可重用的样式表;扩展了CSS样式,增加了变量、Mixin、函数等特性;less可运行在node或浏览器端;
优势:
- LESS轻松地生成可在浏览器中工作的CSS。
- LESS使您能够使用嵌套编写更干净,组织良好的代码。
- 通过使用变量可以更快地实现维护。
- LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
- LESS提供使用操作,使得编码更快并节省时间。
安装:
npm install -g less(提前安装node.js) 可在less后通过@*.*.*指定安装版本; less -v获取less版本
使用:
Less在线编译器可以帮助我们生成CSS代码(w3cschool提供了在线编译器);
1.新建一个.html和.css文件,然后再建立一个.less文件(同一目录下);
2.将.less文件编译为.css文件供.html文件使用, 命令:lessc **.less **.css(当.less文件被修改后都要使用这个命令再次编译)
注:.less文件的简单示例
@back-color:#fff000;
@high:100px;
h1{
color:@back-color;
}
img{
high:@high;
}
Less变量:@变量名: 变量值
嵌套:在less文件中可以用结构化的形式定义样式表(存在嵌套关系),如:
.less文件中
.picture{
h1{
font-size:12px;
background-color:red;
}
p{
padding:10px;
margin:10px;
}
}
转换为.css文件后:
.picture h1
{
font-size:12px;
background-color:red;
}
.picture p{
padding:10px;
margin:10px;
}
mixin:混入/混合,将一个类嵌入另一个类中,被嵌入的类可看作是外面类的变量。
算术运算符:less支持简单的算术运算符,如+,-,*,/,可以对任何数字、颜色或变量进行操作,如
.less文件
@size:10px;
p{
font-size:@size*2;
}
编译后在.css文件中 : lessc **.less **.css
p{
font-size:20px;
}
less转义
~ "字符串文本" ====>>> 字符串文本
.less p{color:~"red";} .css p{color:red;}
less函数:
Less命名空间和访问器
将mixins分组在通用名称下,使用命名空间可以避免名称冲突,并从外部封装mixin组
Less变量范围
变量范围指定可用变量的位置。 变量将从本地作用域搜索,如果它们不可用,则编译器将从父作用域搜索
Less注释 /* */ 和 // 但单行注释//不会显示在.css文件中
Less导入 可导入已生成好的.less和.css文件
@import "**.less" //这句代码可放在任何位置
Less混合:
.less文件中
.p1{
color:res;
}
.p2{
font-size:20px;
.p1();//复用 .p1的样式
}
.css 文件:
.p2{
font-size:20px;
color:red;
}
Less数学函数:
ceil(),floor(),percentage();round();sqrt();abs();sin();asin();cos();acos();tan();atan();pi();pow();mod();min(x1,x2,x3[,,,,]);max(x1,x2,x3[,,,,]);
LessL类型函数(判断某个值是否属于某个类型)
isnumber();isstring()等等
Less颜色函数 :使定义和操作颜色变得超级简单,帮助你控制颜色、更好地配色
rgb();rgba();
Less颜色操作函数 改变颜色强度、透明度等