前端必备-less，深入浅出五分钟熟练运用！

最新推荐文章于 2024-09-08 17:38:22 发布
原创最新推荐文章于 2024-09-08 17:38:22 发布 · 2.9k 阅读
12 ·
CC 4.0 BY-SA版权
文章标签：
#less
less 专栏收录该内容
1 篇文章
订阅专栏
  @charset 'utf-8';

 //一、注释
      /*我可以被转译*/
      //我不可以被转移


 //二、变量
      //@声明变量  @自定的name:值
      @color_01:#eee;


 //三、混合
      //1. 混合
      .time{
            color: red;
      }
      .odiv{
            width: 100px;
            height: 100px;
            background: @color_01;
            .time;
      }
      //2. 混合传参 类似于js中的函数
      .function(@ev_width,@ev_height,@ev_background){
            width:@ev_width;
            height:@ev_height;
            background:@ev_background;
      }
      .box{
            .function(100px,100px,red);//调用时传入实参即可
      }
      //3.混合传参-默认值
      .function(@ev_width:100px,@ev_height:100px,@ev_background:red){
            width:@ev_width;
            height:@ev_height;
            background:@ev_background;
      }
      .box{
            .function();//如果有值读取实参,如果没有走默认值
      }


 //四、匹配
      //1.所谓匹配,类名一样都是trianglefun,判断参数第一位
      //比如说我现在想写一个三角,原声css肯定是这么写
      .triangle{
            width: 0px;
            height: 0px;
            border-width: 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{
            width: 0px;
            height: 0px;
            border-width: 10px;
            overflow: hidden;
            .trianglefun(left,#eee);
      }
      //less 给我们提供了一个方法 @_ ,@_方法的意思是不管匹配到那个都会执行@_方法内的代码(即使没有匹配到任何一个,但是只要执行力这个方法,那么就会调用这个函数) , 但是需要注意后面必须也要加上之前定义的其他参数
      .trianglefun(@_,@color){
            width: 0px;
            height: 0px;
            border-width: 10px;
            overflow: hidden;
      }
      //此时我们在调用的话,是不是简洁了很多
      .triangle{
            .trianglefun(left,#eee);
      }


 //五、运算
      //1. + - * /
      @w:200px;
      .item{
            width: @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{
            width: 100px;
            height: 100px;
            .border();
      }


 //八、 避免编译
      //1.～''
      div{
            width:~'calc(100% - 10px)';
      }


 //九、 !important
      div{
            width: 10px !important;
            .trianglefun(left,#eee) !important;
      }
    //ps: 怎样  你学会了吗 ！！！