LESS 即学即用
我们大家都知道 HTML 和 CSS 不属于编程语言而是属于标记语言，所以很难像 JS 一样定义变量、编写方法、实现模块化开发等。而目前的 CSS 编写模式中，都是定义一些公共的样式类名，哪一块的 HTML 需要这个样式，就去增加对应的样式类名，所以我们经常看到一个标签上存在很多样式类名，在这种模式中我们要时常关注 CSS 的优先级，避免样式的重叠覆盖...
为了解决 CSS 的这一困境，CSS 预处理预编译的思想脱颖而出，比较具有代表性的有 LESS、SASS、Stylus。它们在传统的 CSS 基础上增加了大量的新的语法，编写方式，常用的函数等，可以让我们的 CSS 像 JS 一样成为一门编程语言。本文主要介绍 LESS 的语法和使用。
一、LESS 的编译
编写完成的 LESS 代码是不能直接在浏览器中运行的，需要编译成正常的 CSS 代码。那么我们首先就来学习一下常用的 LESS 编译方式。
1.在浏览器中调用 LESS.JS
LESS 只支持在现代浏览器中运行（最新版本的 Chrome, Firefox, Safari 和 IE）。我们不建议在生产环境中使用 LESS 客户端，因为在将 LESS 编译成 CSS 的时候，用户会看到加载延迟的现象，即便在浏览器中有不足一秒的加载延迟，但也会降低性能。
首先引入我们设置样式的 LESS 文件，注意：这里的 rel='stylesheet/less'
<link type="text/css" rel="stylesheet/less" href="1.less"/>
然后引入 less.js 文件
<script src ="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
浏览器中调用有个好处:可以开启监视模式,只要我们的 LESS 改变，在一定时间内，浏览器就会重新的编译，我们可以看到想要的效果。具体操作如下:
<script charset="utf-8" type="text/javascript">
//->在引入 LESS 之前设置一个全局的变量 less,配置一些参数值（根据情况自行选择需要配置的项)
var less = {
//->env:设置运行的环境（生产模式还是开发模式)
//production:编译后的 CSS 缓存到本地 localStorage 中
//development:没有把编译后的 CSS 缓存到本地,在 URL 不是标准的格式下（例如:file://...),自动设置为 development
env: "development",
//->poll:在监视模式下，每两次请求之间的时间间隔(ms)
poll:500
}
</script>
<script src ="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
<script charset="utf-8" type="text/javascript">
//->启用监视模式(env 必须要设置成 development)
less.watch();
</script>
需要特别注意的是，由于浏览器端使用时是使用 ajax 来拉取.less 文件，因此直接在本机文件系统打开（即地址是 file://开头）或者是有跨域的情况下会拉取不到.less 文件，导致样式无法生效。所以一般 less 做 css 预处理，很少采用引用 less 的方式，一般是把 less 编译成 css 之后，引用生成的 css 文件。
// index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>less</title>
<link type="text/css" rel="stylesheet/less" href="css/styles.less">
</head>
<body>
<header>
<p>Hello World!</p>
</header>
<script src="./less.min.js" type="text/javascript"></script>
</body>
</html>
// styles.less 文件
@blue:#5B83AD;
@size:50px;
header {
color: @blue;
font-size: @size;
}
如果直接引入 less 文件，便会出现错误，可以尝试用一个简单的 web server 启动网站就能解决，譬如 lite-server
npm install -g lite-server
lite-server //to run
2、使用 NODE 命令编译 LESS(单个文件)
这种方式是目前项目中最常用的方式，适用于项目的生产环境，它是把我们的 LESS 文件编译成 CSS 文件，我们项目中直接的引入 CSS 文件即可，基本步骤：安装->编译/压缩编译->或者使用 NODE 代码实现批量编译等
把 LESS 模块安装到全局 NODE 环境中
npm install less -g
使用命令进行编译
//->把 styles.less 文件编译成 styles.css 文件（如果没有这个 CSS 文件自己会创建)
lessc styles.less styles.css
//->编译完成的 CSS 文件是经过压缩的
lessc styles.less styles.min.css -x 或者--compress
经过 node 命令编译代码前后对比:
// styles.less 文件（编译前)
@blue:#5B83AD;
@size:50px;
header {
color: @blue;
font-size: @size;
}
// styles.css 文件（编译后)
header {
color: #5B83AD;
font-size: 50px;
}
3、在 NODE 环境中编写批量编译的代码
我们在上述用 NODE 命令编译的时候，一次只能编译一个文件，这样，如果页面中有多个 LESS，每一次编译都是比较耗费时间的，所以我们结合 NODE 的 FS 文件读写操作，可以写一套批量编译的代码。
//->定义编译文件目录和目标导出目录
var dirPath = "./less/", tarPath = "./css/";
//->导入 NODE 中需要使用的模块
var fs = require("fs"),
less = require("less");
//->读取 dirPath 中的所有文件,检查文件的类型,只有 LESS 文件我们才进行存储
var ary = [],
files = fs.readdirSync(dirPath);
files.forEach(function (file, index) {
/\.(LESS)/i.test(file) ? ary.push(file) : null;
});
//->把目录下的所有文件进行编译,把编译完成的结果保存在指定的目录中
ary.forEach(function (file) {
var newFile = file.replace(".less", ".css"),
conFile = fs.readFileSync(dirPath + file, "utf-8");
less.render(conFile, {compress: true}, function (error, output) {
fs.writeFileSync(tarPath + newFile, output.css, "utf-8");
});
});
4、使用工具编译 LESS
目前常用的编译工具有：Koala(据说目前最流行的)、在线编译（https://www.cdsy.xyz/tools/web/tools/less_to_css/）、SimpLESS 等。本篇文章不做过多的说明。
二、LESS 的语法
LESS 的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。
1.变量
和 JS 中的变量一样，只是 LESS 的变量定义不是使用 VAR 而是使用 @。
//->LESS 代码
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
a {
color: @link-color;
&:hover {
color: @link-color-hover;
}
}
//->编译为 CSS 的结果
a {
color: #428bca;
}
a:hover {
color: #3071a9;
}
除了上述用变量存储公用的属性值，我们还可以用变量存储公用的 URL、选择器等等
//->LESS 代码
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");
}
@selector: box;
@bgImg: "../img";
@property: color;
2.混合(Mixins)
① 基本使用
混合可以将一个定义好的 class A 轻松的引入到另一个 class B 中，从而简单实现 class B 继承 class A 中的所有属性。我们还可以带参数地调用，就像使用函数一样。
//->LESS 代码
.public {
width: 100px;
height: 100px;
}
nav ul {
.public;
list-style: none;
}
//->编译为 CSS 的结果
.public {
width: 100px;
height: 100px;
}
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
上述的代码，nav ul 是把 public 中设定的样式属性值 copy 了一份到自己的样式中。如果你想在编译完成的结果中不输出 public 这个样式的结果，只需要按照下述的代码编写即可：
//->LESS 代码
.public() {//->在选择器后面加上()就可以不编译这个样式了
width: 100px;
height: 100px;
}
nav ul {
.public;//如果 public 有子孙元素的样式，同样也会被复制过来
list-style: none;
}
//->编译为 CSS 的结果
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
② extend
虽然在上述的案例中，nav ul 把 public 中的样式继承了过来，但是原理却是把代码 copy 一份过来，这样编译后的 CSS 中依然会存留大量的冗余 CSS 代码，为了避免这一点，我们可以使用 extend 伪类来实现样式的继承使用。和原来的选择器共用一套样式，但要保证原来的选择器不加括号。
//->LESS 代码
.public {
width: 100px;
height: 100px;
}
nav ul {
&:extend(.public);
list-style: none;
}
//->编译为 CSS 的结果
.public, nav ul {
width: 100px;
height: 100px;
}
nav ul {
list-style: none;
}
3.嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
//->LESS 代码
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
//->编译为 CSS 的结果
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
4.函数 & 运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS 中的函数一一映射了 JavaScript 代码，如果你愿意的话可以操作属性值。
任何数字、颜色或者变量都可以参与运算. 来看一组例子:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
LESS 提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
5.命名空间和作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
湘公网安备 43102202000103号