Less.

介绍

• 是一门CSS的扩展语言，很容易上手，编码结构，采用有结构层次的的编译

变量

• 一个定义变量，一个使用变量

• 定义变量	@变量名:属性值;
  案例		@backgroundColor:rgb(192, 255, 197);
  使用变量	@变量名
  案例		background: @backgroundColor;
  

混合

• 简单来说就是继承一个样式，例如下方，box2直接就可以将box的样式全部拿过来，这样的话就可以少些很多的代码，非常的方便

• .box {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 10px;
  }
  .box2{
  	.box()
  }
  

嵌套

• 嵌套指的就是有结构化的编码

• .box {
    padding:10px;
    p{
      color: #fff;
    }
  }
  

运算

• 支持+，-，*，/

• height: 100px-90px;
  

转义

• 在这里转义指的就是原样输出，例如一些你不需要less到时候进行编译，就可以使用转义进行原样输出

• 使用		~"要原样输出的值"
  height: ~"100px-90px";
  

函数

• 将公用属性进行封装成一个函数，里面可以传值，也可以默认值，如果使用的时候没有传递数据就使用默认数据，如果传递数据的话根据你的数据把默认数据给替换掉

• //定义函数，像@width:100px，这些就属于默认属性
  .boxStyle(@width:100px;@height:50px;@background:red){
  	width: @width;
  	height: @height;
  	background: @background;
  }
  //直接使用默认数据
  .box3{
  	.boxStyle()
  }
  //将默认数据中的背景颜色编程绿色
  .box4{
  	.boxStyle(@background:blue)
  }
  

命名空间和访问符

• &符号是保持同级的，一般用于伪类选择器，例如这里box4悬浮改变背景颜色

• .box4{
  	.boxStyle(@background:blue);
  	&:hover{
  		background:pink
  	}
  }
  

映射

• 只使用函数里面的某个值

• .boxStyle(@width:100px;@height:50px;@background:red){
  	width: @width;
  	height: @height;
  	background: @background;
  }
  //在这里我的背景使用的是boxStyle里面的背景颜色
  .box3{
  	background: .boxStyle[background];
  	width: 100px;
  	height: 400px;
  }
  

作用域

• 使用变量的时候优先查找离自己更近的变量，这就是作用域

• @bgcolor:red;
  .box01{
      @bgcolor:blue;
      background: @bgcolor;
      height: 100px;
      width: 100px;
  }
  

注释

• less中的注释，以//开头注释的，不会被编译到css文件中去，以/**/包裹的注释辉被编译到css文件中

• //不会被编译到css中
  /*会被编译到css中*/
  

导入

• 将另外一个样式文件导入进来

• @import "library"; // library.less
  @import "typo.css";