博客分类：
是一个非常优秀的css增强方言。如果你熟悉，你会发现这个项目大量使用Less, 并且可以通过修改less文件，以此定制自己的boostrap。
最近在中尝试使用less代替css。其中自己用node.js写了一个脚本来简化less编译操作。关于这个工具的代码，你可以在这里获取:
写本文的目的:
简单介绍less的使用
介绍如何将node.js脚本当shell使用
介绍node.js 拼接地址的方式
介绍如何使用node.js 调用shell
介绍如何使用node.js 监视文件改动
如果你想写这么一段css
width: 960;
padding: 50
#main h3 {
font-size: 20
color: #3b5888;
background-color: #
padding: 10
使用less你可以这么写:
width: @mainW
padding: 50
font-size: 20
color: @titleC
background-color: #
padding: 10
这里提供的便利
提供变量的支持
更方便的方式写嵌套样式
如何使用less
1. 在html页面中嵌入less.js,动态渲染css
&link rel="stylesheet/less" href="less/base.less" type="text/css" media="screen" title="no title" charset="utf-8"&
&script src="js/less.js" type="text/javascript" charset="utf-8"&&/script&
2. 使用less指令将less编译成css(这部分是我要简化的部分)
npm install less -g
less public/less/base.less & public/css/base.css
这里第二种方式是我需要简化的。
简化指令参数
监视文件改动，一旦改动，自动编译
简化指令参数:
1. 使用node.js的path包拼接文件路径:
//js file path is ${project}/bin/less2.js
var path = require('path');
var public_dir = path.join(__dirname, "..", "public");
var less_dir = path.join(public_dir, "less", "base.less");
var css_dir = path.join(public_dir, "css", "base.css");
2. 使用exec模块调用shell
var exec = require('child_process').
function compile_less(input_file, output_file) {
var cmd = ['lessc ', input_file, ' & ', output_file].join('');
exec(cmd, {encoding: 'utf-8'},
function(error, stdout, stderr) {
if(error !== null) {
console.log(error);
console.log(stdout);
console.log('compile ' + less_dir + ' once...');
compile_less(less_dir, css_dir);
3. 监视文件改动
fs = require('fs');
console.log('watching file ...');
fs.watchFile(less_dir, {
persistent: true,
interval: 1000 // 1 sec
function(curr, prev) {
console.log('the file changed, compile ...');
compile_less(less_dir, css_dir);
如何让node.js可以当shell用。
1. 获取node cmd的路径
which node
2. 将路径加到node.js文件第一行
#!/usr/local/bin/node
3. 为js文件添加执行权限
chmod +x bin/less2css.js
这样可以不在使用node ***.js 来执行脚本，直接使用 bin/less2css.js即可。当然你也可以去掉*.js的后缀。
#!/usr/local/bin/node
var exec = require('child_process').exec,
path = require('path'),
fs = require('fs')
var public_dir = path.join(__dirname, "..", "public");
var less_dir = path.join(public_dir, "less", "base.less");
var css_dir = path.join(public_dir, "css", "base.css");
function compile_less(input_file, output_file) {
var cmd = ['lessc ', input_file, ' & ', output_file].join('');
exec(cmd, {encoding: 'utf-8'},
function(error, stdout, stderr) {
if(error !== null) {
console.log(error);
console.log(stdout);
console.log('compile ' + less_dir + ' once...');
compile_less(less_dir, css_dir);
console.log('watching file ...');
fs.watchFile(less_dir, {
persistent: true,
interval: 1000 // 1 sec
function(curr, prev) {
console.log('the file changed, compile ...');
compile_less(less_dir, css_dir);
Node.js API:
Less文档：
浏览 13151
witcheryne
浏览: 899981 次
来自: 西安
大神 想问的是 在一般的 登录 和 数据
加密这么两个方面（ ...
dgwutao 写道我的rsa public_key和priv ...
我的rsa public_key和priveate_key不是 ...
亲，可不可以把你的把你的两个文件借我用一下。我这边不能用呀。可 ...
请问您这部分代码是只实现了命令解析的功能吗less v2.2.0 has been released -
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。
Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。
例如:
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow:
@style @c;
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
{ .box-shadow(0 0 5px, 30%) }
编译为：
color: #fe33ac;
border-color: #fdcdea;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
Less可以通过npm在命令行上使用，作为一个脚本文件浏览器或用于广泛的第三方工具下载。有关更多详细信息， 参见
部分。
中安装LESS最简单的方式就是使用Node包管理工具npm来安装:
$ npm install -g less
一旦安装完成，就可以在命令行中调用，例如:
$ lessc styles.less
这样的话编译后的CSS将会输出到 &stdout& 中，你可以选择将这个输出重定向到文件中:
$ lessc styles.less & styles.css
如果你想输出一个压缩后的CSS，只要加到 -x 选项即可。如果你想要更NB的压缩，你也可以选择使用
压缩器，只要加上 --clean-css 即可。
直接运行lessc，不带任何参数将可以看到所有的命令行参数或 查看 .
你可以在Node中调用编译器，例如：
var less = require(&less&);
less.render(&.class { width: (1 + 1) }&, function (e, output) {
console.log(output.css);
将会输出
你可以给编译器传入一些参数：
var less = require(&less&);
less.render(&.class { width: (1 + 1) }&,
paths: [&.&, &./lib&],
filename: &style.less&,
compress: true
function (e, output) {
console.log(output.css);
查看
获取更多信息。
有关其他工具详细信息,参见
部分。
每个 less.js 发布都包含了对应的Rhino命令行版本。
Rhino命令行版本需要两个文件:
less-rhino-.js - 编译启动，
lessc-rhino-.js - 命令行支持。
Command to run the compiler:
java -jar js.jar -f less-rhino-&version&.js lessc-rhino-&version&.js styles.less styles.css
This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to stdout.
在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。
浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合， 建议使用node或者其它第三方工具先编译成CSS再上线使用 。
首先，引入 rel 属性的值是 stylesheet/less 的 .less 样式表 :
rel=&stylesheet/less& type=&text/css& href=&styles.less& /&
接下来， 并将其包涵在您的页面 &head& 元素的 &script&&/script& 标记中：
src=&less.js& type=&text/javascript&&&
确保包涵 .less 样式表在 less.js
脚本 before
当你引入多个 .less 样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。
你可以引入 &script src=&less.js&&&/script& 之前通过创建一个全局 less 对象的方式来指定参数，例如：
env: &development&,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: &comments&,
relativeUrls: false,
rootpath: &:/a.com/&
src=&less.js&&&
或为了简化它们可以在 script 和 link 标记上设置属性（需要的JSON.parse浏览器支持或polyfill）。
src=&less.js& data-poll=&1000& data-relative-urls=&false&&&
data-dump-line-numbers=&all& data-global-vars=&{ myvar: &#ddffee&, mystr: &\&quoted\&& }& rel=&stylesheet/less& type=&text/css& href=&less/styles.less&&
更多
直接从 GitHub 上下载最新的 Less.js 源码。
通过 GitHub 克隆或 fork 本项目！
通过运行下面的命令行安装Less.js项目和JavaScript：
bower install less
src=&///ajax/libs/less.js/2.2.0/less.min.js&&&
Less.js 基于 Apache 2 许可证发布（）。版权所&#x-2015，Alexis Sellier 和 Less 核心小组（见上面）。总结如下：
赋予你的权力：
任意下载并使用 Less.js 的全部或部分代码，可以用于个人、公司内部或商业目的
将 Less.js 包含到你的产品中
严禁：
在没有声明版权归属的情况下使用 Less.js 中的任何代码片段
你的义务：
如果你的产品中包含 Less.js，必须包含一份 Less.js 的版权协议
在你包含了 Less.js 的产品中明确声明 Less.js 的版权归 Less 核心小组
不需要：
在你的产品中包含 Less。js 自身或你所修改的源码
提交你对 Less.js 所做的修改到 Less.js 项目（我们还是鼓励提交对 Less.js 的改进）
完整的 Less.js 版权信息位于 ，请参考。博客分类：
由于 Javascript 无法访问本地的 .less 文件，因此需要一个 http 服务器
本地使用方法：
1、在web目录下新建一个less目录，目录结构如下：
index.html
2、从官网下载一份less.js ， 下载后名为：less-1.3.3.min.js
放到js目录中
3、自己写一个简单的示例less文件，命名为：style.less， 内容如下：
4、index.html内容如下：
&link rel="stylesheet/less" type="text/css" href="less/style.less"&
&script src="js/less-1.3.3.min.js" type="text/javascript"&&/script&
&div id="header"&
This is a id as header of div.
This is a h2 tag.
注意点：一定要注意引用的顺序，一定是先引用.less 再引入.js
而且less的写法与css有点不一样，请观察
LESS的目标是简写CSS。用编程的观点去看待CSS，以OO的思想看待CSS，将常量、函数、命名空间等概念引入，使很松散的页面样式形成一个个对象，方便开发和维护。当然在写的时候要注意技巧，不然生成的CSS将会有大量的冗余代码。所以只建议CSS高手进阶用，初级CSSer最好还是先把CSS写熟了再说吧！
变量和常量（Variables）
以@开始即可，只能定义属性值。注意变量覆盖以及作用域的问题。例如：@blue: #5b83 //常量@light_blue: @nice-blue + #222; //经过计算的常量@highlight: “blue”; #header { color: @@}//常量名为常量
将每个类都看成一个函数，即可以让别的函数调用和传参。并且能在函数中定义子函数。
.border{border: 2px solid # border-radius: 4}
.header {.}
//调用时一定要传参数
.border(@width, @color, @radius){border: @width solid @ border-radius: @}
.header{.border(2px, #ccc, 4px);}
//带默认参数
.border(@width:2px, @color:#ccc, @radius: 4px){
border: @width solid @ border-radius: @
.header {.border(4px, #f00, 2px);}
//@arguments 指所有参数
.border (@width:1px, @style:solid, @color:#ccc){border: @}
height:100
&:hover {color:} //=== #header:hover, &代表同级
&.top {margin-top:12} // === #header.top
h1 {font-size:24}
// === #header h1
#content {
h1{#header h1;} //调用#header h1。这时候#header就相当于命名空间的概念
注释（Comments）
和js一样，单行“//”和多行“/* */”。编译时会删除“//”保留“/* */”。
LESS的运算能力比较强大，主要有两个方面，一个是常规四则运算（Operations）,一个是颜色计算。四则运算遵循常规的优先级，特色是可以对颜色、数字、变量进行运算，而且对带单位的数值有很强的容错能力。例子：@base: 5%; @filler: @base*2; //变量运算color: #888 / 4; //颜色运算，result === #222@var 1px + 5; // result === 6颜色计算主要是LESS提供了以下函数：
lighten(@color, 10%); //return lighten colordarken(@color, 10%); //return darken colorsaturate(@color, 10%); //return more saturateddesaturate(@color, 10%); //return less saturatedfadein(@color, 10%); //return less transparentfadeout(@color, 10%); //return more transparentspin(@color, -10|10); //return smaller or larger than @color
提取颜色值：hue(@color); //returns the hue channel of colorsaturation(@color); //returns the saturation channel of @colorlightness(@color); //returns the lightness channel of @coloralpha(@color) //return alpha channel of @color(hsl模式里面的透明通道)hsl(h,s,l),hsla(h,s,l,a),rgb(r,g,b),rgba(r,g,b,a) //这些更不用说，某些浏览器都支持了。
LESS和Coffee一样，其实都提供了两种安装模式。一种是解释模式，也就是js。通过js就能对less文件进行编译成正常的CSS，嵌入html页面中。这里的过程应该可以通过js进行配置，有空再谈。而另一种就是编译模式，安装LESS编译器，需要node（其实重点是npm）环境支持，进入cmd 输入 npm install less -g 即可。解释模式适用于开发，而编译模式适用于发布上线。二者结合无懈可击。coffee的安装也类似。
下载次数: 86
dcj3sjt126com
浏览: 962342 次
来自: 北京
一个非常棒的系统，要是能支持LDAP等开源认证就完美了。
标签库使用有啥好处呢？
像你最后一句话：批注：至于为什么会有/assets/b729a ...LESS CSS 框架简介
简介CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。LESS 原理及使用方式本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：清单 1. LESS 文件 @color: #4D926F;
}经过编译生成的 CSS 文件如下：清单 2. CSS 文件 #header {
color: #4D926F;
color: #4D926F;
}从上面的例子可以看出，学习 LESS 非常容易，只要你了解 CSS 基础就可以很容易上手。LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。客户端我们可以直接在客户端使用 .less（LESS 源文件），只需要从 下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：&link rel="stylesheet/less" type="text/css" href="styles.less"&LESS 源文件的引入方式与标准 CSS 文件引入方式一样：&link rel="stylesheet/less" type="text/css" href="styles.less"&需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。服务器端LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：@import “variables.less”;.less 文件也可以省略后缀名，像这样：@import “variables”;引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。使用编译生成的静态 CSS 文件我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。语法变量LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。我们可以从下面的代码了解变量的使用及作用：清单 3 LESS 文件 @border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-
}经过编译生成的 CSS 文件如下：清单 4. CSS 文件 .mythemes tableBorder {
border: 1px solid #b5bcc7;
}从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。清单 5. LESS 文件 @width : 20
#homeDiv {
@width : 30
#centerDiv{
width : @// 此处应该取最近定义的变量 width 的值 30px
#leftDiv {
width : @ // 此处应该取最上面定义的变量 width 的值 20px
}经过编译生成的 CSS 文件如下：清单 6. CSS 文件 #homeDiv #centerDiv {
#leftDiv {
}Mixins（混入）Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。我们先简单看一下 Mixins 在 LESS 中的使用：清单 7. LESS 文件// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @
-webkit-border-radius: @
border-radius: @
// 在另外的样式选择器中使用
.roundedCorners(10px);
}经过编译生成的 CSS 文件如下：清单 8. CSS 文件 #header {
-moz-border-radius:5
-webkit-border-radius:5
border-radius:5
-moz-border-radius:10
-webkit-border-radius:10
border-radius:10
}从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：清单 9. LESS 文件// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @
-webkit-border-radius: @
border-radius: @
// 使用已定义的样式选择器
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}经过编译生成的 CSS 文件如下：清单 10. CSS 文件 #header {
-moz-border-radius: 10
-webkit-border-radius: 10
border-radius: 10
-moz-border-radius: 3
-webkit-border-radius: 3
border-radius: 3
}我们还可以给 Mixins 的参数定义一人默认值，如清单 11. LESS 文件.borderRadius(@radius:5px){
-moz-border-radius: @
-webkit-border-radius: @
border-radius: @
}经过编译生成的 CSS 文件如下：清单 12. CSS 文件 .btn {
-moz-border-radius: 5
-webkit-border-radius: 5
border-radius: 5
}像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。清单 13. LESS 文件 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @
-webkit-box-shadow: @
box-shadow: @
.boxShadow(2px,2px,3px,#f36);
}经过编译生成的 CSS 文件如下：清单 14. CSS 文件 #header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：清单 15. LESS 文件 #mynamespace {
.home {...}
.user {...}
}这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace & .user。嵌套的规则在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：清单 16. HTML 片段 &div id="home"&
&div id="top"&top&/div&
&div id="center"&
&div id="left"&left&/div&
&div id="right"&right&/div&
&/div&清单 17. LESS 文件 #home{
width : 600
height : 500
width : 90%;
height : 300
width : 90%;
width : 40%;
width : 40%;
}经过编译生成的 CSS 文件如下：清单 18. CSS 文件 #home {
width: 600
height: 500
#home #top {
width: 90%;
#home #center {
height: 300
width: 90%;
#home #center #left {
width: 40%;
#home #center #right {
width: 40%;
}从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。清单 19. LESS 文件a {
text-decoration:
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
text-decoration:
}经过编译生成的 CSS 文件如下：清单 20. CSS 文件 a {
text-decoration:
text-decoration:
}运算及函数在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：清单 21 . LESS 文件 @init: #111111;
@transition: @init*2;
.switchColor {
}经过编译生成的 CSS 文件如下：清单 22. CSS 文件 .switchColor {
color: #222222;
}上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表： lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%);// return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @colorPS: 上述代码引自 LESS CSS 官方网站，详情请见 使用这些函数和 JavaScript 中使用函数一样。清单 23 LESS 文件init: #f04615;
background-color: fadein(@init, 10%);
}经过编译生成的 CSS 文件如下：清单 24. CSS 文件 #body {
background-color: #f04615;
}从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。Comments（注释）适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。LESS VS SASS同类框架还有 SASS : , 与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法，更多两者之间的比较，请参考这篇帖子：。结束语本文提到的只是 LESS 的基本功能，更高级的功能如：字符串插值，服务器端使用配置，JavaScript 表达式，避免编译等可以参看 LESS 的官方网站。LESS 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，LESS 为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 LESS 的部分特性，我们只需用很少的成本就可以换了很大的回报，一句话，Less is more，借助 LESS 可以更便捷的进行 Web 开发。
参考 ，了解什么是 LESS。
参考 ，了解 CSS。
参考 ，了解什么是 SASS。
参考 ，了解 SASS 和 LESS 异同。
：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过
栏目，迅速了解 Web 2.0 的相关概念。查看 ，了解更多和 HTML5 相关的知识和动向。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=824903ArticleTitle=LESS CSS 框架简介publish-date=