Less编译后才能被浏览器识别。
注释
//不会在编译后的css中显示
/*会在编译后的css显示*/
设置公共文件public.less
每个文件引入 @import ‘./public.less’;
公共文件中可设置
公共变量
@red: #ff4609;
公共方法
/* public.less */
.kkk(@num: 100){ /* 默认值100 */
height: 1rem * @num / 100;
}
/* a.less 中引用该方法 */
#a{
.kkk(60); /* height: 0.6rem; */
}
/* public.less */
/* 根据传入参数不同调用不同方法(两个方法同名) */
.a(t1, @k: 100px){
width: @k;
}
.a(t2, @k: 200px){
width: @k;
}
/* a.less 中引用该方法 */
#a{
.a(t1); /* 100px; */
}
变量
//普通变量
@blue: #5B83AD;
#a{
color: @blue;
}
//作为选择器和属性名
@kd: width;
.@{kd}{
@{kd}: 100px;
}
//作为url
@myUrl:"a/b/c";
body{ background: url(“@{myUrl}/d.png”) }
//变量是延迟加载的,使用前不需预先声明
.a{ width: @w; }
@w: @a;
@a: 10px;
//存在同名变量时,会在当前作用域向上搜索,使用最后定义的值
@a: 0;
.class{
@a: 1;
.brass{
@a: 2;
three: @a;
@a: 3;
}
one: @a;
}
//编译后
.class{ one:1; }
.class .brass{ three:3; }
混合
//普通混合
.a{
border: 1px solid red;
color: black;
}
#sa{
.a;
font-size: 19px;
}
//不带输出的混合,不希望混合集输出到样式,加括号,编译后.a()消失
.a(){ … }
#sa{ .a(); }
//带选择器的混合
.a(){
&:hover{ … } //&代表父级
}
#sa{ .a(); } //#sa:hover{ … };
//带参数的混合,没有默认参数又不传参不合法
.a(@red){ color: @red; } //括号内可写@red:#ff0011表示默认值,若没传参数使用
#sa{ .a(#ff0000); }
//多参数
.a(@a1; @a2:2; @a3:3){
color: @a1;
margin: @a2;
padding: @a3;
}
#sa{ .a(1,2,3;x,y); } //@a1:1,2,3;@a2:x,y;@a3:3;
#sa{ .a(1,2,3); } //@a1:1;@a2:2;@a3:3;
#sa{ .a(1,2,3;); } //@a1:1,2,3;@a2:2;@a3:3;
//如果只有“,”,以此分隔,如果有“;”,以“;”分隔。
//多个同名混合
.a(@a1){
color-1: @a1;
}
.a(@a1;@a2:2){
color-2: @a1;
margin-2: @a2;
}
.a(@a1;@a2;@a3:3){
color-3: @a1;
margin-3: @a2;
padding-3: @a2;
}
#sa{ .a(1); }
//编译
#sa{
color-1: 1;
color-2: 1;
margin-2: 2;
}
//最后一个.a因为只传了一个参数,非法
//命名参数
//混合引用时靠参数名而非位置传参
.a(@color;@margin){ … }
#sa{ .a{@margin:5px;@color:red}; }
//@arguments变量
//代表所有可变参数,参数先后顺序是括号内参数的先后顺序
//赋值时若想给第1和第3个值赋值,不能写(1,,3) 大专栏 Less的使用,要把默认值写上。
.a(@x:solid;@y:red){
border: 1px @arguments;
}
//匹配模式
.a(all, @w:5px){ … }
.a(all-2, @w:15px){ … }
#sa{ .a(all-2,10px); } //使用all-2那个,@w变成10px
//得到混合中变量的返回值
.a(@x, @y){
@ag: ((@x+@y)/2);
}
#sa{
.ag(16px,15px);
margin: @ag;
}
运算
任何数组、颜色和变量都可以运算。
只需保证一个数值有单位即可:5px + 5 (10px)
运算符和值之间必须以空格分开
运算颜色时先转为rgb模式,再转为16进制的颜色返回
#000000 + 21 //#151515 //rgb 00 00 00 → rgb 21 21 21
rgb取值范围0-255,超过默认使用255
函数
rbg(0,133,0) //#008500
//rbg函数,将rbg模式转为16进制
less里有很多函数,详情看函数库
嵌套
.a{
…
.b{ … }
}
&:当前选择器的父选择器
ul{
li{
&:hover{ … } //ul li:hover
}
}
/* 若把&放在当前选择器中,则当前选择器会插入所有父选择器之前 */
ul{
li{
.a &{ … } //.a ul li
}
}
/* 组合使用生成所有可能的选择器列表 */
p, a, span{
& &{ … }
}
p p,p a,p span,a a,a p,a span,span a,span p,span span{ … }
命名空间
#sa(){
.a{
color: #000;
&:hover{ color: #fff; }
.b{ background:#ff0000; }
}
}
.sa1{
#sa > .a; //相当于把.a部分搬过来,大于符号可省略
}
.sa2{
#sa > .a > .b; //相当于把.b搬过来,大于符号可省略
}
//编译后
.sa1{ color: #000; }
.sa1:hover{ color:#fff; }
.sa1 .b{ background:#ff0000; }
.sa2{ background:#ff0000; }
作用域
在局部查找变量和混合,若没有,则去父作用域查找。
@a: 1;
.a{
.b{
font-size: @a; //2
}
@a: 2;
}
引入
@import “main”; //引入main.less文件
也可引入css文件,但不能混合到项目中,编译后引入css的import保持原状
@import “index.css” //.color{ color:#fff; }
@wp: 10px;
.a{
width: @wp;
.color; //错误,不能混用
}
参数
@import (reference) “main”;
-
once 默认,只包含一次
-
reference 使用less文件(比如其中的变量,混合等),但编译时不输出引入less的内容
比如引入的main.less中的有.a{color:red;},编译后不输出
-
inline 编译后输出原文件但不加工,引用文件不能使用被引用文件的变量等,否则报错
-
less 无论文件扩展名是什么,作为less文件对象
-
css 无论文件扩展名是什么,作为css文件对象
-
multiple 允许引入多次相同文件名的文件
关键字
调用混合集后面加!important关键字,可以使混合集里所有属性都继承!important
条件表达式
//带条件的混合
.a(@a) when (@a > 10){
color: red;
}
.a(@a) when (@a <= 10){
color: green;
}
.a(@a){ x:@a; }
#sa{ .a(3) }
//编译后
#sa{
color: green;
x: 3;
}
类型检查函数
.a(@a) when(isnumber(@b)){…}
基于类型匹配
-
iscolor
-
isnumber
-
isstring
-
iskeyword
-
isurl
单位检查函数
-
ispixel
-
ispercentage
-
isem
-
isunit
循环
.a(@c)when(@c > 0){
.a((@c - 1));
width:(10px * @c);
}
div{ .a(3); }
//编译后
div{
width:10px;
width:20px;
width:30px;
}
合并属性
.a(){
margin+: 1px;
}
.myclass{
.a();
margin+: 10px;
}
//编译后
.myclass{
margin:1px, 10px;
}
// +:以逗号分隔属性值
// +_:以空格分隔属性值