less

Posted 2020-09-01 我叫大王来巡山

语法一：

注释：//.less文件

　　　　/**/.less、css文件中

语法二：变量

　　变量必须加@符号

　　[email protected]:200px;

语法三：混合

　　less中的混合相当于js中的函数。

　　--带参混合、不带参混合、带参默认值的混合。

语法四：匹配模式

　　类似switch-case

　　

.ops(r){
　　position:relative;
}
.ops(a){
　　position:absolute;
}
.ops(f){
　　position:fixed;
}
.opsi{
　　background:#090;
　　color:#fff;
　　height:200px;
　　.pos(a);
}

　　

语法五：运算符

　　less运算符：+-*/任何数字、颜色或者变狼都可以参与运算，运算应该被包裹在括号中

语法六：嵌套

　

#navigation ul{
　　list-style:none;
　　margin:0;
　　li{
　　　　background:#f00;
　　　　a{
　　　　　　background:#ff0;
　　　　　　&:hover{
　　　　　　　　　　　　color:#0f0;
　　　　　　　　　　}
　　　　}
　　}
　　a{
　　　　background:#fff;
　　}
　　span{
　　　　float:left;
　　}
}

语法七：@argument

　　@argument包含了所有传递进来的参数。

　　不想单独处理每一个参数的话可以这样写

@size:200px;
.box-shadow(@x:3px,@y:3px,@blur:1px,@color:#f00){
　　box-shadow:@argument;
　　-moz-box-shadow:@argument;
}
#div1{
　　width:@size;
　　.box-shadow();
　　//.box-shadow(2px,5px);
}

　语法八：避免编译

　　输出一些不正确的css语法或者一些less不认识的语法

　IE滤镜、要输出这样的值我们可以在字符串前加一个~

.alpha1{
　　filter:~"alpha(opacity=100,finishopacity=0,style=3)",
　　/*矩形渐变，中间不透明，四周透明*/
}
#div1{
　　width:~‘calc(300px-30px)‘;
}