LESS.js V1.7 快速入门
<div class="docs-section" style="box-sizing: border-box;"><div class="page-header" style="box-sizing: border-box; padding-bottom: 9px; margin-top: 40px; margin-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238);"><h1 id="getting-started" style="box-sizing: border-box; margin-top: -45px; margin-bottom: 15px; padding-top: 80px;"><span style="color: inherit; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 1.1; font-weight: normal;"><font size="4">来源：</font></span><font color="#333333" face="ff-tisa-web-pro-1, ff-tisa-web-pro-2, Lucida Grande, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif" size="4"><span style="font-weight: normal; line-height: 19.8px;">http://less.bootcss.com/</span></font></h1><h1 id="getting-started" style="color: inherit; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 1.1; box-sizing: border-box; font-size: 38px; margin-top: -45px; margin-bottom: 15px; font-weight: 500; padding-top: 80px;">快速入门</h1></div><p style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; line-height: 20px; box-sizing: border-box; margin-bottom: 10px;">Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。</p><p style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; line-height: 20px; box-sizing: border-box; margin-bottom: 10px;">Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。</p><p style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; line-height: 20px; box-sizing: border-box; margin-bottom: 10px;">例如：</p><pre style="color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 1.42857; box-sizing: border-box; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-less" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-at_rule" style="box-sizing: border-box;">@base: <span class="lang-hexcolor" style="box-sizing: border-box; color: rgb(0, 153, 153);">#f938ab</span>;</span><span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box-shadow</span>(<span class="lang-at_rule" style="box-sizing: border-box;">@style, @c)<span class="lang-preprocessor" style="box-sizing: border-box; color: rgb(153, 153, 153); font-weight: bold;"> when</span> (<span class="lang-function" style="box-sizing: border-box;">iscolor(@c)</span>) {</span>
-webkit-<span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">box-shadow</span><span class="lang-value" style="box-sizing: border-box;">: @style @c;</span>
<span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">box-shadow</span><span class="lang-value" style="box-sizing: border-box;">: @style @c;</span>
}
<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box-shadow</span>(<span class="lang-at_rule" style="box-sizing: border-box;">@style, @alpha:<span class="lang-preprocessor" style="box-sizing: border-box; color: rgb(153, 153, 153); font-weight: bold;"> 50</span>%)<span class="lang-preprocessor" style="box-sizing: border-box; color: rgb(153, 153, 153); font-weight: bold;"> when</span> (<span class="lang-function" style="box-sizing: border-box;">isnumber(@alpha)</span>) {</span>
<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box-shadow</span>(<span class="lang-at_rule" style="box-sizing: border-box;">@style,<span class="lang-preprocessor" style="box-sizing: border-box; color: rgb(153, 153, 153); font-weight: bold;"> rgba</span>(<span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>,<span class="lang-preprocessor" style="box-sizing: border-box; color: rgb(153, 153, 153); font-weight: bold;"> 0</span>,<span class="lang-preprocessor" style="box-sizing: border-box; color: rgb(153, 153, 153); font-weight: bold;"> 0</span>, @alpha));</span>
}
<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box</span> {
<span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">color</span><span class="lang-value" style="box-sizing: border-box;">: saturate(@base, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">5</span>%);</span>
<span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">border-color</span><span class="lang-value" style="box-sizing: border-box;">: lighten(@base, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">30</span>%);</span>
<span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);">div</span> { <span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box-shadow</span>(0 0 5px, 30%) }
}
</code></pre><p style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; line-height: 20px; box-sizing: border-box; margin-bottom: 10px;">编译为：</p><pre style="color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: 1.42857; box-sizing: border-box; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-css" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box</span> <span class="lang-rules" style="box-sizing: border-box;">{
<span class="lang-rule" style="box-sizing: border-box;"><span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">color</span>:<span class="lang-value" style="box-sizing: border-box;"> <span class="lang-hexcolor" style="box-sizing: border-box; color: rgb(0, 153, 153);">#fe33ac</span></span></span>;
<span class="lang-rule" style="box-sizing: border-box;"><span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">border-color</span>:<span class="lang-value" style="box-sizing: border-box;"> <span class="lang-hexcolor" style="box-sizing: border-box; color: rgb(0, 153, 153);">#fdcdea</span></span></span>;
<span class="lang-rule" style="box-sizing: border-box;">}</span></span>
<span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.box</span> <span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);">div</span> <span class="lang-rules" style="box-sizing: border-box;">{
<span class="lang-rule" style="box-sizing: border-box;"><span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">-webkit-box-shadow</span>:<span class="lang-value" style="box-sizing: border-box;"> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">5</span>px <span class="lang-function" style="box-sizing: border-box;">rgba(<span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0.3</span>)</span></span></span>;
<span class="lang-rule" style="box-sizing: border-box;"><span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">box-shadow</span>:<span class="lang-value" style="box-sizing: border-box;"> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">5</span>px <span class="lang-function" style="box-sizing: border-box;">rgba(<span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span>, <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">0.3</span>)</span></span></span>;
<span class="lang-rule" style="box-sizing: border-box;">}</span></span>
</code></pre><div class="source-link" style="color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; line-height: 20px; box-sizing: border-box;"><a href="https://github.com/less/less-docs/tree/master/content/home/getting-started.md" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">Improve this section.</a></div></div><div class="docs-section" style="box-sizing: border-box; padding-top: 40px; color: rgb(51, 51, 51); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; line-height: 20px;"><div class="page-header" style="box-sizing: border-box; padding-bottom: 9px; margin-top: 40px; margin-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238);"><h1 id="using-less" style="box-sizing: border-box; font-size: 38px; margin-top: -45px; margin-bottom: 15px; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; padding-top: 80px;">使用 Less</h1></div><blockquote style="box-sizing: border-box; padding: 10px 20px; margin-bottom: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(238, 238, 238);"><p style="box-sizing: border-box; font-size: 17.5px; line-height: 1.25;">Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。请参考 <a href="http://less.bootcss.com/usage" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">用法</a> 。</p></blockquote><h2 id="" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">安装</h2><p style="box-sizing: border-box; margin-bottom: 10px;">在服务器端最容易的安装方式就是通过 npm （<a href="http://nodejs.org/" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">node.js</a> 的包管理器），方法如下：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-bash" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;">$ npm install -g less
</code></pre><h2 id="" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">命令行用法</h2><p style="box-sizing: border-box; margin-bottom: 10px;">安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-bash" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;">$ lessc styles.less
</code></pre><p style="box-sizing: border-box; margin-bottom: 10px;">这将输出编译之后的 CSS 代码到 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">stdout</code>，你可以将输出重定向到一个文件：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-bash" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;">$ lessc styles.less > styles.css
</code></pre><p style="box-sizing: border-box; margin-bottom: 10px;">若要输出压缩过的 CSS，只需添加 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">-x</code> 选项。如果希望获得更好的压缩效果，还可以通过 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">--clean-css</code> 选项启用 <a href="https://github.com/GoalSmashers/clean-css" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">Clean CSS</a> 进行压缩。</p><p style="box-sizing: border-box; margin-bottom: 10px;">执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。</p><h2 id="less" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">在代码中调用 Less</h2><p style="box-sizing: border-box; margin-bottom: 10px;">可以像下面这样在代码中调用 Less 编译器（Node 平台）。</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-js" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">var</span> less = <span class="lang-built_in" style="box-sizing: border-box; color: rgb(0, 134, 179);">require</span>(<span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'less'</span>);
less.render(<span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'.class { width: (1 + 1) }'</span>, <span class="lang-function" style="box-sizing: border-box;"><span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">function</span> <span class="lang-params" style="box-sizing: border-box;">(e, css)</span> {</span>
console.log(css);
});
</code></pre><p style="box-sizing: border-box; margin-bottom: 10px;">输出为</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-css" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-class" style="box-sizing: border-box; color: rgb(68, 85, 136); font-weight: bold;">.class</span> <span class="lang-rules" style="box-sizing: border-box;">{
<span class="lang-rule" style="box-sizing: border-box;"><span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">width</span>:<span class="lang-value" style="box-sizing: border-box;"> <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">2</span></span></span>;
<span class="lang-rule" style="box-sizing: border-box;">}</span></span>
</code></pre><p style="box-sizing: border-box; margin-bottom: 10px;">你还可以手动调用分析器（paser）和编译器：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-js" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">var</span> parser = <span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">new</span>(less.Parser);
parser.parse(<span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'.class { width: (1 + 1) }'</span>, <span class="lang-function" style="box-sizing: border-box;"><span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">function</span> <span class="lang-params" style="box-sizing: border-box;">(err, tree)</span> {</span>
<span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (err) {
<span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> console.error(err)
}
console.log(tree.toCSS());
});
</code></pre><h2 id="" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">配置</h2><p style="box-sizing: border-box; margin-bottom: 10px;">可以给编译器传递多个参数：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-js" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">var</span> parser = <span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">new</span>(less.Parser)({
paths: [<span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'.'</span>, <span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'./lib'</span>], <span class="lang-comment" style="box-sizing: border-box; color: rgb(153, 153, 136); font-style: italic;">// Specify search paths for @import directives</span>
filename: <span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'style.less'</span> <span class="lang-comment" style="box-sizing: border-box; color: rgb(153, 153, 136); font-style: italic;">// Specify a filename, for better error messages</span>
});
parser.parse(<span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">'.class { width: (1 + 1) }'</span>, <span class="lang-function" style="box-sizing: border-box;"><span class="lang-keyword" style="box-sizing: border-box; font-weight: bold;">function</span> <span class="lang-params" style="box-sizing: border-box;">(e, tree)</span> {</span>
tree.toCSS({
<span class="lang-comment" style="box-sizing: border-box; color: rgb(153, 153, 136); font-style: italic;">// Minify CSS output</span>
compress: <span class="lang-literal" style="box-sizing: border-box;">true</span>
});
});
</code></pre><h2 id="grunt" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">Grunt</h2><p style="box-sizing: border-box; margin-bottom: 10px;">Less 还和流行的 Grunt 构建工具进行了集成，可以参考 <a href="https://github.com/gruntjs/grunt-contrib-less" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">grunt-contrib-less</a> 插件。</p><h2 id="" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">第三方工具</h2><p style="box-sizing: border-box; margin-bottom: 10px;">请参考 <a href="http://less.bootcss.com/usage" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">用法</a> 一节了解其它工具的细节。</p><h1 id="" style="box-sizing: border-box; font-size: 38px; margin-top: -45px; margin-bottom: 15px; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; padding-top: 80px;">客户端用法</h1><blockquote style="box-sizing: border-box; padding: 10px 20px; margin-bottom: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(238, 238, 238);"><p style="box-sizing: border-box; font-size: 17.5px; line-height: 1.25;">在浏览器上跑 less.js 非常方便开发，但是不推荐用于生产环境。</p></blockquote><p style="box-sizing: border-box; margin-bottom: 10px;">在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便，但是，在生产环境中，性能和可靠性非常重要，<em style="box-sizing: border-box;">我们建议最好使用 node.js 或其它第三方工具进行预编译</em>。</p><p style="box-sizing: border-box; margin-bottom: 10px;">那就开始吧，在页面中加入 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">.less</code> 样式表的链接，并将 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">rel</code> 属性设置为 "<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">stylesheet/less</code>"：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-html" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"><<span class="lang-title" style="box-sizing: border-box;">link</span> <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">rel</span>=<span class="lang-value" style="box-sizing: border-box;">"stylesheet/less"</span> <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">type</span>=<span class="lang-value" style="box-sizing: border-box;">"text/css"</span> <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">href</span>=<span class="lang-value" style="box-sizing: border-box;">"styles.less"</span> /></span>
</code></pre><p style="box-sizing: border-box; margin-bottom: 10px;">接下来，<a href="https://github.com/less/less.js/archive/master.zip" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">下载 less.js</a> 并通过 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);"><script></script></code> 标签将其引入，放置于页面的 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);"><head></code> 元素内：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-html" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"><<span class="lang-title" style="box-sizing: border-box;">script</span> <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">src</span>=<span class="lang-value" style="box-sizing: border-box;">"less.js"</span> <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">type</span>=<span class="lang-value" style="box-sizing: border-box;">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"></<span class="lang-title" style="box-sizing: border-box;">script</span>></span>
</code></pre><h3 id="" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 24px; padding-top: 80px;">提示</h3><ul style="box-sizing: border-box; margin-bottom: 10px;"><li style="box-sizing: border-box;">务必确保在 less.js 之前加载你的样式表。</li><li style="box-sizing: border-box;">如果加载多个 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">.less</code> 样式表文件，每个文件都会被单独编译。因此，一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。</li></ul><h2 id="" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 31px; padding-top: 80px;">浏览器端设置参数</h2><p style="box-sizing: border-box; margin-bottom: 10px;">在 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);"><script src="less.js"></script></code> <strong style="box-sizing: border-box;">之前</strong> 定义全局的 <code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(199, 37, 78); white-space: nowrap; border-radius: 4px; background-color: rgb(249, 242, 244);">less</code> 对象就可以为 Less.js 设置参数：</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="lang-html" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><span class="lang-comment" style="box-sizing: border-box; color: rgb(153, 153, 136); font-style: italic;"><!-- set options before less.js script --></span>
<span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"><<span class="lang-title" style="box-sizing: border-box;">script</span>></span><span class="javascript" style="box-sizing: border-box;">
less = {
env: <span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">"development"</span>,
async: <span class="lang-literal" style="box-sizing: border-box;">false</span>,
fileAsync: <span class="lang-literal" style="box-sizing: border-box;">false</span>,
poll: <span class="lang-number" style="box-sizing: border-box; color: rgb(0, 153, 153);">1000</span>,
functions: {},
dumpLineNumbers: <span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">"comments"</span>,
relativeUrls: <span class="lang-literal" style="box-sizing: border-box;">false</span>,
rootpath: <span class="lang-string" style="box-sizing: border-box; color: rgb(221, 17, 68);">":/a.com/"</span>
};
</span><span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"></<span class="lang-title" style="box-sizing: border-box;">script</span>></span>
<span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"><<span class="lang-title" style="box-sizing: border-box;">script</span> <span class="lang-attribute" style="box-sizing: border-box; color: rgb(0, 128, 128);">src</span>=<span class="lang-value" style="box-sizing: border-box;">"less.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="lang-tag" style="box-sizing: border-box; color: rgb(0, 0, 128);"></<span class="lang-title" style="box-sizing: border-box;">script</span>></span>
</code></pre><div class="source-link" style="box-sizing: border-box;"><a href="https://github.com/less/less-docs/tree/master/content/home/using-less.md" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">Improve this section.</a></div><h3 id="browser-downloads" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 24px; padding-top: 80px;">浏览器端下载</h3><p style="box-sizing: border-box; margin-bottom: 10px;"><a class="btn btn-lg btn-primary" href="https://raw.github.com/less/less.js/master/dist/less-1.7.0.min.js" role="button" style="box-sizing: border-box; color: rgb(255, 255, 255); text-decoration: none; display: inline-block; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid rgb(53, 126, 189); white-space: nowrap; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; -webkit-user-select: none; background: none rgb(66, 139, 202);">下载 Less.js v1.7.0</a></p><div class="docs-dl-options" style="box-sizing: border-box;"><h4 style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: 15px; margin-bottom: 5px; font-size: 18px;"><a href="https://github.com/less/less.js/archive/v1.7.0.zip" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">下载源码</a></h4><p style="box-sizing: border-box; margin-bottom: 10px;">直接从 GitHub 上下载最新的 Less.js 源码。</p><h4 style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: 15px; margin-bottom: 5px; font-size: 18px;"><a href="https://github.com/less/less.js.git" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">通过 GitHub 克隆或 fork 本项目</a></h4><h4 style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: 15px; margin-bottom: 5px; font-size: 18px;">通过 <a href="http://bower.io/" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">Bower</a> 安装</h4><p style="box-sizing: border-box; margin-bottom: 10px;">通过 <a href="http://bower.io/" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">Bower</a> 安装 Less.js 项目。</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="language-bash" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;">bower install less</code></pre></div><h3 id="download-cdn" style="box-sizing: border-box; font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: 500; line-height: 1.1; color: inherit; margin-top: -60px; margin-bottom: 15px; font-size: 24px; padding-top: 80px;">Less CDN 加速</h3><p style="box-sizing: border-box; margin-bottom: 10px;"><a href="http://cdn.bootcss.com/less.js/1.7.0/less.min.js" style="box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; background: transparent;">CDN</a>.</p><pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; padding: 9.5px; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 1.42857; word-break: break-all; border: 1px solid rgb(238, 238, 238); border-radius: 0px; box-shadow: rgb(226, 226, 226) -5px 0px 0px; background-color: rgb(248, 248, 248);"><code class="language-html" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: inherit; color: inherit; border-radius: 0px; display: block; background: transparent;"><script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script></code></pre></div><p></p>
页:
[1]