欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Less 常用基础知识_html/css_WEB-ITnose

程序员文章站 2022-04-24 20:37:11
...
LESS 中的注释
  也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。
  也可以使用// 注释 不会被编译的
变量
  声明变量的话一定要用@开头 例如:@变量名称:值;
  @test_width:300px;
  .box{
      width:@test_width;
      height:@test_width;
      background-color:yellow;
    }
混合-(Mixin)
  混合(mixin)变量
    例如: .border{border:solid 10px red}
    .box{
      width:@test_width;
      height:@test_width;
      background-color:yellow;
      .border;
    }
  带参数的混合
    .border-radius(@radius){css 代码}
    可认定默认值
    .border-radius(@radius:5px){css 代码}
  混合-可带的参数
    .border_02(@border_width){
      border:solid yellow @border_width;
    }
    .test_hunhe{
      .border_02(30px);
    }
  混合 -默认带值
    .border_03(@border_width:10px){
        border:solid green @border_width;
    }
    .test_hunhe_03{
      .border_03();
    }
    .test_hunhe_04{
      .border_04(20px);
    }
  混合的例子
    .border_radius(@radus:5px){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        border-radius:@radius;
      }
    .radius_test{
      width:100px;
      height:40px;
      background-color:green;
      .border_radius();
    }
匹配模式
      .sanjiao{
        width:0;
        height:0;
        overflow:hidden;
        border-width:10px;
        border-color:transparent transparent red transparent;
        border-style:dashed dashed solid dashed;
     }

    .triangle(top,@w:5px,@c:#ccc){
            border-width:@w;
            border-colo:transparent transparent @c transparent
            border-style:dashed dashed solid dashed;
      }
    .triangle(bottom,@w:5px,@c:#ccc){
            border-width:@w;
            border-colo:@c transparent transparent transparent
            border-style:solid dashed dashed dashed;
      }
    .triangle(left,@w:5px,@c:#ccc){
          border-width:@w;
          border-colo: transparent @c transparent transparent
          border-style: dashed solid dashed dashed;
      }
    .triangle(right,@w:5px,@c:#ccc){
          border-width:@w;
          border-colo: transparent transparent transparent @c;
          border-style: dashed dashed dashed solid;
      }
    .trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。
          width:0;
          height:0;
          overflow:hidden;
      }
    .sanjiao{
      .trangle(top,100px);
      }
  // 匹配模式- 定位
    .pos(r){
      position:relative;
    }
    .pos(a){
      position:absolute;
    }
    .pos(f){
      position:fixed;
    }
运算
  @test_01:300px;
  .box_02{
    width:@test_01 +20;
  }
  .box_02{
    width:@test_01 -20;
  }
  .box_02{
    width:(@test_01 20) *5;
    color:#ccc -10;
  }
嵌套:
  .list{
      width:600px;
      margin30px auto;
      padding:0;
      list-style:none;
      li{
        height:30px;
        line-height:30px;
        background-color:pink;
        margin-bottom:5px;
      }
      a{
        float:left;
        &hover{
        color:red; //& 代表他的上一层选择器。
        }
      }
    }
@arguments 变量
    @arguments 包含了所有的传递进来的参数。
      .border_arg(@w:30px,@c:red,@xx:solid){
      .border:@arguments;
    }
避免编译
  .test_03{
    width:~'calc(300px -30)';
  }

!importan关键字
    .test_important{
      .border_radius() !important;
  }