Less中Css预处理器

Less.js

安装

npm install -g less

---

变量

basic

变量采用@进行变量定义。变量可以直接参加运算。

@width:100px;
.variables{
  width:@width;
  height: @width+50px; （变量运算之后，不加px单位也可）
}

作用域 scope

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

<div id="nesting">
      <div>
        <div />
      </div>
    </div>

#nesting{
  width:200px;
  height:300px;
  background-color: @color;
  @color:#66aa44; //绿色
  div{
    width: 200px;
    height: 150px;
    background-color:#ff0000;
    @color:#7a6ff4;//蓝紫色
  div{
    width: 200px;
    height: 75px;
    background-color:@color;
    }
  }
}

第三个div的background-color是使用的变量@color，但是本地并没有这个变量定义，便在上一个父级寻找此变量。在上一级寻找到变量之后，即使再上一级也定义过此变量，也不采用。

---

Mixins

basic

Less.js的Mixin是直接在less代码里直接加入选择器和()。使用id选择器#作为被mix的代码也可以。

.a{
  color:#000000;
  background-color: shade((#ff0000),50%) ;//棕色
  border:3px solid black
}
.b{
  .a(); /* #a()也可行，如果定义了 */
  background-color: #00ff00;//绿色
}

如果被mix的代码重写了mix代码中的某一个属性，重写代码生效。（棕色变为了绿色）

bundle

出于方便的原因，可以将mix代码集合到bundle里然后进行分发。

 <div class="div-style" id="nesting" />

#bundle(){
  .a{
  color:#000000;
  background-color: #ff9843 ;
  border:3px solid black
}
.blank{
  color:#883743
}
}
.div-style{
  #bundle.a();
}

#bundle非关键字，可以使用其他变量代替

#test(){
  .a{
  color:#000000;
  background-color: #ff9987 ;
  border:3px solid black
}
}
.div-style{
  #test.a();
}

映射 Maps

将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

我的理解：将相同属性的变量集合到一起，需要使用时再进行分发。

#colors(){
  first:#a9ff62;
  secondary:#f7f4a3
};
#test(){
  .a{
  color:#000000;
  background-color:#colors[first] ;
  border:3px solid black
		}
}
.div-style{
  #test.a();
}

---

嵌套

嵌套的规则和Js的规则几乎一致。

<div id="nesting">
      <div>
        <div />
      </div>
    </div>

#nesting{
  width:200px;
  height:300px;
  background-color: @color;
  @color:#66aa44; //绿色
  div{
    width: 200px;
    height: 150px;
    background-color:#ff0000;
    @color:#7a6ff4;//蓝紫色
  	div{
    	width: 200px;
    	height: 75px;
    	background-color:@color;
    	}
  	}
	}

也可以使用&:伪元素的方式，嵌套伪元素结构。

---

函数

函数作为less一个非常重要的功能，能够帮助js处理一些非逻辑层面的计算。

.a{
  color:#000000;
  background-color: shade((#ff0000),50%) ;
  border:3px solid black
}

颜色处理函数shade()，可以将被处理颜色（代码里是#ff0000），按照距离#000000的权重，进行变色（简单说就是加深多少 ）