新建.less文件 输入@charset"utf-8";
body{
background-color:red;
}
注释：
/会被编译/
//不会被编译
定义变量语法：@变量名：值
@text_width:100px;
.box_01{
width:(@text_width+2)*5; //变量可以进行运算
color:#ccc-10;
}
混合
box{
width:@text_width;
height:@text_width;
.border;
}
.border{
border:solid 2px #ffffff;
}
//css中的显示结果
.box{
width:100px;
height:100px;
border:solid 2px #ffffff;
}
//混合 -带参数的
.border_02(@boder_width){
border:solid #e3e3e3 @border_width;
}
.test{
border_02(30px);
}
//混合 带默认值的
.border_03(@border_width:10px){
border:solid green @border_width;
}
.test{
border_03();
}
//示例1
border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
//三角示例
.sanjiao{
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color:red transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
//匹配模式 三角
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style:dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){ //都会加载
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.triangle(left,100px);
}
//嵌套规则
a{
float:left;
//&代表它的上一层选择器
&:hover{
color:red;
}
}
//
.border_arg(@w:30px,@c:red;@xx:solid){
border:@arguments;
//@arguments包含了所有传递进来的参数
}
避免编译 //滤镜、calc()可以用
.test_03{
width:calc(300px-30px); //输出width:270px;
width:~'calc(300px-30px)'; //输出width:calc(300px-30px);
}
//支持!important