Less学习总结

Less是什么

Less类似于jQuery。

——是一种css动态语言，属于css预处理语言的一种。它使用类似css的语法，为css赋予动态语言的特性，如变量、继承、函数、运算等，更方便css的维护与编写。

注释

/**/ ：编译时保留，编译后的css文件中也能看到注释
//：编译时忽略，编译后的css文件中看不到

定义变量

用符号@来定义变量

• 例
  定义：
  @width:300px;
  使用：
  .box{width:@width;}

混合

编写可重用样式

例：

.border{
      border:solid 5px #fff;
}
.box{
      .border;
      margin:10px;
}

带参数的混合

例：

.border(@border_width){
      border:solid @border_width #fff;
}
.test{
     .border(30px);
} 

带默认值的混合

例：

.border(@border_width:30px){
      border:solid @border_width #fff;
}
.test{
     .border();/*不报错，默认传入30px,若传入参数，则参数覆盖默认值*/
} 

匹配模式

例：

.position(r){
     position:relative;/*相对定位*/
}
.position(a){
     position:absolute;/*绝对定位*/
}
.position(f){
     position:fixed;/*静止*/
}

.test{
    .postion(a);/*使用绝对定位*/
}

运算

@width:300px;
.box{width:@width+20px;}

嵌套

例：

li{
    a{
         color:#ff0000;
         &:hover{#color:#0000ff;}/*&代表它的上一层选择器*/
    }
    span:{color:#00ff00}
}

相当于：

li a{color:#ff0000;}
li a:hover{color:#0000ff;}
li span{color:#00ff00}

@arguments变量

@arguments包含了传进来的所有参数。
例：

.test_border(@color:#fff,@so:solid,@width:30px){
      border:@arguments;
}

避免编译

语法：~''

更多语法可查阅less官网。