less学习总结（一）

版权声明：转载请注明出处： https://blog.csdn.net/qq_38262910/article/details/85255035

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

使用

1.使用koala软件，实时将.less文件转换为.css文件
2.在.html文件中使用link引入生成的.css文件
3.在.less文件中@charset"utf-8";

特性

变量
@变量名=属性；

@test_width：100px;
.box{
  width:@test_width;
}

混合

.box{
  width:100px;
  .border
}
.border{
  border: solid 1px pink;
}

混合 --带参数

.border_02(@border_width){
  border:solid yellow @border_width;
}
.test_hunhe{
    .border_02(10px);
}

混合 --默认带参

.border_03(@border_width:10px){
  border:solid 1px @border_width;
}
.test_hunhe_03{
  .border_03();
}

匹配模式

.triangle(top,@w:1px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style:dashed dashed solid dashed;
}
下面@_表示匹配结果怎样都会带上下面的样式
.triangle(@_,@_w:10px:@_c:#ccc){

}

匹配模式 -定位

 .pos(r){
    position:relative;
  }
  .pos(a){
    position:absolute;
  }
  .pos(f){
    position:fixed;
  }
  .pipei{
    width:200px;
    height:200px;
    background-color:green;
    .pos(a);
  }

运算

@test_width:200px;
.box{
  width:@test_width+20;
}
或
@test_width:200;
.box{
  width:@test_width+20px;
}

嵌套

尽量减少匹配层数
.list{
  li{
  }
  a{
    &：hover{
        }
  }
}

@arguments 代表所有传递进来的参数

.border(@w:10px,@c:teal,@xx:solid){
   border:@arguments;
}

避免编译

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

！important关键字

会为所有混合带有的样式，添加上!important
  例如：
  test_important{
   .border_03() !important;
  }