Less.js简单介绍

Less是一门向后兼容的CSS 预处理语言。使 CSS 更易维护和扩展。
安装
在服务器上安装less最简单方法是通过node.js软件包管理npm安装，-g全局安装

npm install less -g

Less的新功能：

1.新增变量

在样式表中相同的值重复n多次，使用变量控制这些值，使代码更易于维护。

@link-color: #428bca; 
a, .link { color: @link-color; }
div {backgroud:  @link-color; }

2.混合（Mixins）
将一个规则集包含到另一个规则集里去。
例如：定义一个类class = ‘myborder’：

.myborder {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

在其它规则中需要使用这个类里的属性

#menu a {
  color: #111;
  .myborder();  // 这里
}

3.嵌套
css代码如下：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 语言改写代码如下：
用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

4、@规则嵌套和冒泡
@规则可以和选择器以相同方式嵌套，@规则会被放在前面。
同一规则集里其他元素的相对顺序保持不变，叫做冒泡
Less代码

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
}

编译为:

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}

5、运算
如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

6、转义

// 3.5+版本Less
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

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

7、函数
Less内置了多种函数用于转换颜色、处理字符串、算术运算等
例如：用·percentage函数把0.5转换成50%，用saturate将颜色饱和度增加5%

@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  }

8、命名空间和访问符
将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：

#bundle() {
  .button {
    border: 1px solid black;
  }
  .tab { ... }
  .citation { ... }
}

如果想把.button 混合到另一个规则里面

#header a {
  color: orange;
  #bundle.button(); //如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。
}s

9、maps映射
通过key: 对象[属性]的格式来实现映射

#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];   // color输出：blue
  border: 1px solid #colors[secondary];    // 1px solid green

10、作用域
less的作用域与css的作用域类似。先在本地查找变量和混合，若找不到，则从父级作用域继承

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}