简介
LESS包含了一套自定义的语法及一个解析器,用户可以通过解析器,编译生成对应的css文件,它完全兼容css语法,再其基础上加入了程序化语言的特性。比如引入变量,Mixin(混入);降低了css的维护的成本。
LESS语言特性
导入
myfile.less
.myfile{ color: color: #5882fA;}
myfile2.less
@import "myfile.less"
.myfile2{ color: #ff0000; }
可以使用以下命令将 style.less 文件编译为 style.css :
lessc myfile2.less myfile2.css
myfile2.css
.myfile{ color: color: #5882fA;}
.myfile2{ color: #ff0000; }
变量
LESS允许开发者自定义变量,可以是全局也可以是局部变量,局部变量优先级高于全局变量(是情况而定)
less文件
@var: @a;
@a: 15px;
.myclass {
font-size: @var; /*注释,最好使用段落注释符,双斜杠在css中不展示*/
@a:20px;
color: green;
}
}
得到css文件:
.myclass {
font-size: 20px;
color: green;
}
混合
style.less文件:
.p1{color: red;}
.p2{background: #64d9c0;
.p1();
}
style.less转换成style.css文件:
.p1{color: red;}
.p2{background: #64d9c0;
color:red;
}
Extend(继承)
Extend是Less的伪类,他将所放置它的选择器与匹配引用的选择器进行合并
.a { color: red;}
.text {
background-color: #c3c3c3;
&:extend(.a);
font-size: 12px;
}
转换为css文件如下:
.a, .text {
color: red;
}
.text {
background-color: #0d94f3;
font-size: 12px;
}
less Mixin Guards
可以在表达式上匹配简单的值或者参数数量,可以通过使用Guards。有很多类型检查函数,下面会一一列举;
style.less
.mixin (@a) when (lightness(@a) >= 50%){
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%){
font-size: 16px;
}
.mixin (@a){
color: @a;
}
.class1{.mixin(#FF0000)}
对应的css文件
.class1 {
font-size: 14px;
color: #FF0000;
}
less类型检查函数
iscolor/isnumber/isstring/iskeyword/isurl/ 举例如下:
style.less
.mixin (@a; @b:red) when (iscolor(@b)){
color: blue;
}
.mixin (@a){
font-size: @a;
}
.myclass { .mixin(20px)}
style.css
.myclass {
color: blue;
font-size: 20px;
}
循环
Loops语句允许我们多次执行一个语句或者多个语句,当递归mixin与Guard表达式和模式匹配组合时,可以创建各种迭代/循环结构。\
style.less文件
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
style.css文件:
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
合并
允许使用单个属性从多个属性中为逗号或空格分隔列表添加值,它可以用于背景和交换属性。分为合并逗号和合并空间。
- 合并逗号 : 它添加属性到最后。
style.less
.myfunc() { box-shadow+: 5px 5px 5px grey;}
.class {
.myfunc();
box-shadow+:0 0 5px #f78181;
}
style.css
.class {
box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}
- 合并空间:它添加了属性值和空格。
style.less文件
.mixin() { transform+_: scale(1);}
.class {
.mixin();
tramsform+_: rotate(2deg);
}
style.css文件:
.class {
transform: scale(1) rotate(2deg);
}
函数
函数 | 描述 | 示例 |
---|---|---|
color() | 代表一个颜色的字符串 | color:(#fe2700) |
image-size | 从文件检查图像的维度 | image-size:image-size(“startup.jpg”); |
image-width | 检查文件中图像的宽度 | |
image-height | 检查文件中图像的高度 | |
convert | 数字从一个单位转换为另一个单位 | no-unit:convert(5, mm); |
数学函数
函数 | 描述 | 例子 |
---|---|---|
ceil | 数字向上舍入为最大整数 | ceil(0.7)舍入为1 |
floor | 向下去整 | floor(3.3) 它将数字舍入后为:3 |
percentage | 浮点数转换为百分比字符串 | percentage(0.2)转换后:20% |
round | 舍入浮点数 | round(3.77)转换后4 |
abs | 绝对值 |