@charset 'utf-8';
//一、注释
/*我可以被转译*/
//我不可以被转移
//二、变量
//@声明变量 @自定的name:值
@color_01:#eee;
//三、混合
//1. 混合
.time{
color: red;
}
.odiv{
100px;
height: 100px;
background: @color_01;
.time;
}
//2. 混合传参 类似于js中的函数
.function(@ev_width,@ev_height,@ev_background){
@ev_width;
height:@ev_height;
background:@ev_background;
}
.box{
.function(100px,100px,red);//调用时传入实参即可
}
//3.混合传参-默认值
.function(@ev_100px,@ev_height:100px,@ev_background:red){
@ev_width;
height:@ev_height;
background:@ev_background;
}
.box{
.function();//如果有值读取实参,如果没有走默认值
}
//四、匹配
//1.所谓匹配,类名一样都是trianglefun,判断参数第一位
//比如说我现在想写一个三角,原声css肯定是这么写
.triangle{
0px;
height: 0px;
border- 10px;
overflow: hidden;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
//但是我想让他换个方向呢,就比较麻烦了,所以我们把它封装起来
//分别为四个方向
.trianglefun(top,@color){
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.trianglefun(right,@color){
border-color: transparent @color transparent transparent;
border-style: dashed solid dashed dashed;
}
.trianglefun(bottom,@color){
border-color: transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
.trianglefun(left,@color){
border-color: transparent transparent transparent @color;
border-style: dashed dashed dashed solid;
}
//现在我们已经风装起来了,但是其他的熟悉我们每次都还有写,能不能也封装起来啊
.triangle{
0px;
height: 0px;
border- 10px;
overflow: hidden;
.trianglefun(left,#eee);
}
//less 给我们提供了一个方法 @_ ,@_方法的意思是不管匹配到那个都会执行@_方法内的代码(即使没有匹配到任何一个,但是只要执行力这个方法,那么就会调用这个函数) , 但是需要注意后面必须也要加上之前定义的其他参数
.trianglefun(@_,@color){
0px;
height: 0px;
border- 10px;
overflow: hidden;
}
//此时我们在调用的话,是不是简洁了很多
.triangle{
.trianglefun(left,#eee);
}
//五、运算
//1. + - * /
@w:200px;
.item{
@w - 20;
color: #999 - 10;
}
//六、嵌套
//1.嵌套
//我们写了div,div下面是a链接,a链接下面是span标签,三层
//<div><a href=""><span></span></a></div>
//我们首先用原声的写法
div{
xxx;
}
div a{
xxx;
}
div a span{
xxx;
}
//但是在less里面又一个更简洁更清晰的写法
div{
xxx;
a{
xxx;
span{
xxx;
}
}
}
//2.&当前作用域,也就是他的父及
//比如说我们之前想给一个div加hove效果,我们肯是这么加
a{
color:red;
}
a:hover{
color:blue;
}
//我们来看一下less中的写法
a{
color: red;
&:hover{//此时的 & 就是 a
color: blue;
}
}
//七、@arguments方法
//1. @arguments 全部参数的集合
.border(@w:1px,@color:#eee,@type:solid){
border: @arguments;
}
.bor{
100px;
height: 100px;
.border();
}
//八、 避免编译
//1.～''
div{
~'calc(100% - 10px)';
}
//九、 !important
div{
10px !important;
.trianglefun(left,#eee) !important;
}
//ps: 怎样 你学会了吗 ！！！
————————————————
版权声明：本文为CSDN博主「王海虎」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaohu12685/article/details/80939138