JavaScript 赋值 (JavaScript Evaluation)如果能在 CSS 中使用一些 JavaScript 方法无疑是十分令人兴奋的，而 LESS 真正逐步加入这项功能，目前已经能使用字符串及数字的常用函数了，想要在 LESS 中运用 JavaScript 赋值只需要用反引号（`）来包含所要进行的操作即可。让我们看看实例吧。
清单 19. JavaScript 赋值的例子1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .eval {
js: `1 + 1`;
js: `(1 + 1 == 2 ? true : false)`;
js: `"hello".toUpperCase() + '!'`;
title: `process.title`;
}
.scope {
@foo: 42;
var: `this.foo.toJS()`;
}
.escape-interpol {
@world: "world";
width: ~`"hello" + " " + @{world}`;
}
.arrays {
@ary: 1, 2, 3;
@ary2: 1 2 3;
ary: `@{ary}.join(', ')`;
ary: `@{ary2}.join(', ')`;
}
|
我们可以看到，在 eval 中我们可以用 JavaScript 做数字运算，布尔表达式；对字符串做大小写转化，串联字符串等操作。甚至最后能够获取到 JavaScript 的运行环境（process.title）。同样可以看到 LESS 的作用域和变量也同样在 JavaScript 赋值中使用。而最后的例子中，我们看到 JavaScript 赋值同样运用于数组操作当中。其实 LESS 的 JavaScript 赋值还有支持其他一些方式，不过目前尚未公布出来。
清单 20. JavaScript 赋值生成的 CSS 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .eval {
js: 2;
js: true;
js: "HELLO!";
title: "/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node";
}
.scope {
var: 42;
}
.escape-interpol {
width: hello world;
}
.arrays {
ary: "1, 2, 3";
ary: "1, 2, 3";
}
|
LESS 开发的实用工具 – LESS.app在 LESS 开发中，我们可以用 LESS 提供的 JavaScript 脚本来在运行时解析，将 LESS 文件实时翻译成对应的 CSS 语法。如下面这个例子：
清单 21. helloworld.html1
2
3
4
| <link rel="stylesheet/less" type="text/css" href="helloworld.less">
<script src="less.js" type="text/javascript"></script>
<div class="helloworld">Hello World!</div>
|
从上面的示例可以看出，在 helloworld.less 引入之后我们还添加了一个 JavaScript 文件，这个文件就是 LESS 的解释器，可以在 LESS 的官方网站上下载此文件。需要注意的是，要注意 LESS 文件和 LESS 解释器的引入顺序，确保所有的 LESS 文件都在 LESS 解释器之前。
看到这里也许有人会说，实时解析的话方便倒是方便，可以性能上不就有损耗了么？比起普通 CSS 来说多了一道解释的手续。也许还有的人对写好的 LESS 文件不太放心，希望能看到解析之后的 CSS 文件来检查下是否是自己希望的内容。这两个问题其实都是能够解决的，LESS 提供了服务端的方案，使用 npm 安装 LESS 之后就能够将您所有的 LESS 文件批量转化成 CSS 文件，然后您拿到 CSS 文件就可以随心所欲了，检查生成的内容是否有误，也可以直接在 HTML 中引用，再也不用添加 LESS 的 JavaScript 文件来解析它了。关于这部分的详细安装信息，可以直接参考 LESS 官网上的介绍，这里就不复述了。
不过，对于 Mac 用户来说还有一个更方便的工具可以使用，它就是 less.app. 这是一个第三方提供的工具，使用起来十分方便，我们可以在下图所示的界面上添加 LESS 文件所在的目录，此工具就会在右侧列出目录中包含的所有 LESS 文件。最酷的是，从此您就不用再操心惦记着要把 LESS 文件编译成 CSS 文件了，这个工具会在您每次修改完保存 LESS 文件时自己执行编译，自动生成 CSS 文件。这样，您就可以随时查看 LESS 代码的最终效果，检查目标 CSS 是否符合您的需要了，实在是太方便了！
图 2. 导入 LESS 文件夹的界面，左侧可添加存放在多个不同路径的文件夹。 图 3. 编译结果界面，在此可手动批量编译所有 LESS 文件。 更值为称道的是，LESS.app 还是个免费软件，接受捐赠：） |
