#Less学习记录

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

less编辑工具koala编译下载地址：点击打开链接

注释：

/**/会被编译到css文件里边
//不会被编译到css文件里边

变量：<Less中声明变量一定要用@符号>

@Width_300:300px;
@Height_200:200px;
.Box{
  width: @Width_300;
  height: @Height_200;
}

混合：

.Padding{
  padding: 10px;
}
.Box{
  .Padding;
}

混合模式<带参数>：

.border_A(@border_width){
  border:@border_width solid #0083ff;
}
.Div_A{
  .border_A(10px);
}

混合模式<带默认值>：

.border_A(@border_width:10px){
  border:@border_width solid #0083ff;
}
.Div_A{
  .border_A();
}

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

.Border_arg(@Width:10px;@Color:#0083ff;@Form:solid){
  border: @arguments;
}
//改变其中一个变量，其他变量默认不发生改变<保留原值>
.Box{
  .Border_arg(#F5F5F5);
}

Less嵌套中&符号代表上一层选择器：<常用来为元素添加悬浮、点击等状态>

a{
  color: #F5F5F5;
  &:hover{
    color: #0083ff;
  }
}

less中的清除浮动：

.clearfix{
  &:after{
    content:"";
    display:block;
    clear:both;
  }
}

less避免编译用符号~例如： ~‘calc(300px-30px)’，less直接把calc(300px-30px)给到css文件，在被浏览器调用时，浏览器自己运算。

!important 表示样式的优先级别最高

注：@_ 意思为不管调用哪种样式块都会加上该样式块的样式。