Less入门小册

1.简介

Less是一种Css的样式预处理器，比起css能达到更好的管理和服用样式表的作用。

2.快速入门

2.1变量+运算

无需多说，看代码一目了然：

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}

2.2嵌套

Less 提供了嵌套代替层叠或与层叠结合使用的场景。假设我们有以下 CSS 代码：

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

用 Less 语言我们可以这样书写代码：

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

注意：父层级的选择器简写成"&" 

2.3导入

你可以导入一个样式文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; 

2.4混合方法

混合方法是将一个规则集的一组属性混到另一