CSS：预处理器之Less

预处理器less

是在css的基础上进行扩展，可将css直接转换成less，而less需要编译
因而在小型项目中还是直接使用css更为便捷
但是大型项目中可考虑（更加简洁、适应性更强、可读性更佳，更易于代码的维护）

less文档(http://lesscss.org/)

Node.js 环境中使用 Less ：

npm install -g less
lessc styles.less styles.css 

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>

编辑器中插件

创建less文件并保存后自动解析生成相应css文件

1.vscode
Easy LESS

2.sublime
Less2Css

常用less方法

1.变量
css:

a,.link {
  color: #428bca;
}

less:

@link-color: #428bca;

a,.link {
  color: @link-color;
}

2.继承
符号 &表示关系
css:

a {
  color: blue;
}

a:hover {
  color: green;
}

less:

a {
  color: blue;
  &:hover {
    color: green;
  }
}

3.合并
css

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

less

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}