less v1.7.0 版本已经发布 -
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
@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 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。请参考
安装在服务器端最容易的安装方式就是通过 npm （ 的包管理器），方法如下：
$ npm install -g less
命令行用法安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：
$ lessc styles.less
这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：
$ lessc styles.less & styles.css
若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 --clean-css 选项启用
进行压缩。
执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。
在代码中调用 Less可以像下面这样在代码中调用 Less 编译器（Node 平台）。
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
你还可以手动调用分析器（paser）和编译器：
var parser = new(less.Parser);
parser.parse('.class { width: (1 + 1) }', function (err, tree) {
if (err) {
return console.error(err)
console.log(tree.toCSS());
配置可以给编译器传递多个参数：
var parser = new(less.Parser)({
paths: ['.', './lib'],
filename: 'style.less'
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({
compress: true
GruntLess 还和流行的 Grunt 构建工具进行了集成，可以参考
第三方工具请参考
一节了解其它工具的细节。
客户端用法
在浏览器上跑 less.js 非常方便开发，但是不推荐用于生产环境。
在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便，但是，在生产环境中，性能和可靠性非常重要，我们建议最好使用 node.js 或其它第三方工具进行预编译。
那就开始吧，在页面中加入 .less 样式表的链接，并将 rel 属性设置为 &stylesheet/less&：
rel="stylesheet/less" type="text/css" href="styles.less" /&
接下来， 并通过 &script&&/script& 标签将其引入，放置于页面的 &head& 元素内：
src="less.js" type="text/javascript"&&
务必确保在 less.js 之前加载你的样式表。
如果加载多个 .less 样式表文件，每个文件都会被单独编译。因此，一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。
浏览器端设置参数在 &script src=&less.js&&&/script& 之前 定义全局的 less 对象就可以为 Less.js 设置参数：
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
src="less.js"&&
浏览器端下载
直接从 GitHub 上下载最新的 Less.js 源码。
安装 Less.js 项目。
bower install less
Less CDN 加速
&script src=&/less.js/1.7.0/less.min.js&&&/script&
Less.js 基于 Apache 2 许可证发布（）。版权所有 ，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 版权信息位于 ，请参考。gulp教程之gulp-less
Ooo_My_God发表于 分类： 阅读(11887) 评论()
简介： 使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。
1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握？请参看：
1.2、本示例目录结构如下：
2、本地安装gulp-less 2.1、github： 2.3、安装：命令提示符执行 cnpm install gulp-less --save-dev 2.4、注意：没有安装cnpm请使用 npm install gulp-less --save-dev
2.5、说明：--save-dev 保存配置信息至 package.json 的 devDependencies 节点。
3、配置gulpfile.js 3.1、基本使用
JavaScript
var gulp = require('gulp'),&&&&less = require('gulp-less');&gulp.task('testLess', function () {&&&&gulp.src('src/less/index.less')&&&&&&&&.pipe(less())&&&&&&&&.pipe(gulp.dest('src/css'));});
3.2、编译多个less文件
JavaScript
var gulp = require('gulp'),&&&&less = require('gulp-less');&gulp.task('testLess', function () {&&&&gulp.src(['src/less/index.less','src/less/detail.less']) //多个文件以数组形式传入&&&&&&&&.pipe(less())&&&&&&&&.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css以及detail.css });
3.3、匹配符“!”，“*”，“**”，“{}”
JavaScript
12345678910
var gulp = require('gulp'),&&&&less = require('gulp-less');&gulp.task('testLess', function () {&&&&//编译src目录下的所有less文件&&&&//除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）&&&&gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']) &&&&&&&&.pipe(less())&&&&&&&&.pipe(gulp.dest('src/css'));});
3.4、调用多模块（编译less后压缩css）
JavaScript
1234567891011
var gulp = require('gulp'),&&&&less = require('gulp-less'),&&&& //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev]&&&&cssmin = require('gulp-minify-css');&gulp.task('testLess', function () {&&&&gulp.src('src/less/index.less')&&&&&&&&.pipe(less())&&&&&&&&.pipe(cssmin()) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))&&&&&&&&.pipe(gulp.dest('src/css'));});
3.5、当less有各种引入关系时，编译后不容易找到对应less文件，所以需要生成sourcemap文件，方便修改
JavaScript
123456789101112
var gulp = require('gulp'),&&&&less = require('gulp-less'),&&&& //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]&&&&sourcemaps = require('gulp-sourcemaps');&gulp.task('testLess', function () {&&&&gulp.src('src/less/**/*.less')&&&&&&&&.pipe(sourcemaps.init())&&&&&&&&.pipe(less())&&&&&&&&.pipe(sourcemaps.write())&&&&&&&&.pipe(gulp.dest('src/css'));});
4、执行任务 4.1、命令提示符执行：gulp testLess
5、监听事件（自动编译less） 5.1、若每修改一次less，就要手动执行任务，显然是不合理的，所以当有less文件发生改变时使其自动编译
JavaScript
123456789101112
var gulp = require('gulp'),&&&&less = require('gulp-less');&gulp.task('testLess', function () {&&&&gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less'])&&&&&&&&.pipe(less())&&&&&&&&.pipe(gulp.dest('src/css'));});&gulp.task('testWatch', function () {&&&&gulp.watch('src/**/*.less', ['testLess']); //当所有less文件发生改变时，调用testLess任务});
5.2、启动监听事件：命令提示符执行 gulp testWatch 5.3、注意：该命令提示符执行需处于打开状态，关闭后监听事件结束(Ctrl + C 或右上)
6、异常处理 6.1、当编译less时出现语法错误或者其他异常，会终止watch事件，通常需要查看命令提示符窗口才能知道，这并不是我们所希望的，所以我们需要处理出现异常并不终止watch事件（gulp-plumber），并提示我们出现了错误（gulp-notify）。
JavaScript
123456789101112131415
var gulp = require('gulp'),&&&&less = require('gulp-less');&&&&//当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber&&&&notify = require('gulp-notify'),&&&&plumber = require('gulp-plumber');&gulp.task('testLess', function () {&&&&gulp.src('src/less/*.less')&&&&&&&&.pipe(plumber({errorHandler: notify.onError('Error: &%= error.message %&')}))&&&&&&&&.pipe(less())&&&&&&&&.pipe(gulp.dest('src/css'));});gulp.task('testWatch', function () {&&&&gulp.watch('src/**/*.less', ['testLess']);});
7、结束语 7.1、本文有任何错误，或有任何疑问，欢迎留言说明
如果觉得我的文章对您有用，请随意打赏。您的支持将是我继续创作的动力！
相关推荐  评论使用node.js編寫工具簡化less編譯(less2css.js)
/blog/1871683 原文中有個錯誤，容易誤導初學者：
less public/less/base.less & public/css
/blog/1871683 原文中有個錯誤，容易誤導初學者：
less public/less/base.less & public/css/base.css 應該是 lessc 編譯。
最近在中嘗試使用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
rel="stylesheet/less" href="less/base.less" type="text/css" media="screen" title="no title" charset="utf-8"
src="js/less.js" type="text/javascript" charset="utf-8"
2. 使用less指令將less編譯成css(這部分是我要簡化的部分)
npm install less -g
less public/less/base.less & public/css/base.css
這裏第二種方式是我需要簡化的。
簡化指令参數
監視文件改動，一旦改動，自動編譯
簡化指令参數:
1. 使用node.js的path包拼接文件路徑:
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
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
function(curr, prev) {
console.log('the file changed, compile ...');
compile_less(less_dir, css_dir);
Node.js API:
Less文檔：
------分隔線----------------------------
在Mac OS X 中默認是沒有my.cnf 文件，如果需要對MySql 進行定制，拷...
資源文件存在於values目錄的strings.xml
關於android文字陰影，共有四個屬性可以設置：
android:shadowCo...
&&&&昨天對敏捷個人成長俱樂部的線下6月份活動進...
OpenCart之Ajax關聯選項(Related Options)模塊插件...
背景：edittext獲得焦點的時候，textView的字體顏色動態改變，以標...编译Boostrap的css和js文件（涉及Nodejs、Less、Grunt）_心得技巧_动态网站制作指南
编译Boostrap的css和js文件（涉及Nodejs、Less、Grunt）
来源：人气：31
这段时间一直在看Bootstrap,随着逐渐加深免不了进行Boostrap的和js文件的编译了。涉及的技术并不难，只是电脑环境不一样，偶尔会碰见一两个小坑，现在将过程记录下来。
以下假设已经安装好了Nodejs，安装路径为D:\ogram Files\nodejs\。如果没有安装，建议查看另外一篇博文《安装Nodejs、npm、Less（支持生成压缩后的css）》
/getting-started/#download ，下载后解压到某个文件夹下
如 D:\bootstrap-3.3.7
2、安装Grunt
在命令行（cmd）输入以下命令
cd D:\Program Files\nodejs\node_modules\npm
npm install -g grunt-cli
3、安装Boostrap依赖的扩展包
在命令行（cmd）输入以下命令
cd D:\bootstrap-3.3.7
npm install
笔者进行到这一步时提示下载phantomjs-1.9.8-windows.z失败，解决方法很简单，手动从网上下载该文件(链接：/s/1slm41el 密码：iepl)，放到错误提示里提到的目录下（笔者电脑里是C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip），删除D:\bootstrap-3.3.7\node_modules文件夹，重新执行npm -install。
4、至此，就可以执行Grunt的命令来编译了，官方提供以下命令
grunt dist
（仅编译 CSS 和 Script 文件） 重新生成 /dist/ 目录，并将编译压缩后的 CSS 和
文件放入这个目录中。
grunt watch
（监测文件的改变，并运行指定的 Grunt 任务）， 监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。只生成未压缩的文件。
grunt test
（运行测试用例） 在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。
grunt docs
（编译并测试文档中的资源文件） 编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 bundle exec jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。
（重新构建所有内容并运行测试用例） 编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。
上述命令中，笔者用的最多的是第1个和第2个，笔者采用WebStorm来编辑Bootstrap源码的，WebStorm自带Watcher功能自动将less编译成css,不过笔者建议在编辑Bootstrap源码时停用该功能，采用Grunt watch功能代替。
优质网站模板grunt less自动编译,css,js压缩 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 15时,
如下是一些相关的URL链接http://www.gruntjs.net/plugins(grunt插件列表)/art/127.htm(grunt&完整教程)因为是第一次搭建可能不是最优,大神勿喷项目结构&&&grunt_test(项目名称)&&&&&&dist&&&&&&&&&&--css&&&&&&&&&&--js&&&&&&&&&&--less&&&&&js&&&&less&&&&node_modules&&&&.jshintrc&&&&.jshintrcmessage&&&&.Gruntfile.js&&&&.package.json
代码片段(4)
1.&[代码]package.json&&&&
"name": "grunt_test",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-jshint": "^0.11.3",
"grunt-contrib-less": "^1.1.0",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "^0.6.1"
2.&[代码]Gruntfile.js&&&&
//包装函数
module.exports = function (grunt) {
//任务配置,所有插件的配置信息
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//uglify插件的配置信息(js压缩插件)
options: {
stripBanners: true,
banner: '/*|&%=pkg.name%&-&%=pkg.verson%&.js &%=grunt.template.today("yyyy-mm-dd")%&*/\n'
/* builda:{//任务一：压缩test.js，不混淆变量名，保留注释，添加banner和footer
mangle:false,
//不混淆变量名
preserveComments: 'all', //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释）
footer:'\n*//*! &%= pkg.name %& 最后修改于： &%= grunt.template.today("yyyy-mm-dd") %& *//*'//添加footer
'build/test.js':['src/test.js']
buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
expand: true,
src: 'js/*.js',//所有js文件
ext:'.js',
dest: 'dist'//输出到此目录下
release: {//任务四：合并压缩a.js和b.js
'build/test.min.js': ['src/test.js', 'src/test1.js']
//jshint插件的配置信息(js语法规整校验插件)
build: ['Gruntfils.js', 'js/*.js'],
options: {
jshintrc: '.jshintrc'
//less插件配置
expand: true,
src: ['less/*.less'],
dest: 'dist',
ext: '.css'
options: {
compress: true,
yuicompress:false
//css压缩插件
expand: true,
cwd: 'dist/less',
src: ['*.css', '!*.min.css'],
dest: 'dist/css',
ext: '.min.css'
//watch插件的配置信息(监控js,css文件,如改变自动压缩,语法检查)
//用于监听less文件,当改变时自动编译成css文件
files: ['less/*.less'],
tasks: ['less'],
options: {
livereload: true
clientcss: {
//用于监听css文件,当改变时自动压缩css文件
files: ['dist/less/*.css'],
tasks: ['cssmin'],
options: {
livereload: true
files: ['js/*.js', 'css/*.css'],
tasks: ['jshint', 'uglify'],
options: {
spawn: false
//告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
//告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序)
grunt.registerTask('default', ['cssmin','jshint', 'uglify', 'less', 'watch']);
3.&[代码].jshintrc&&&&
"sub":true,
"laxbreak":true,
"laxcomma":true,
"regexp":true,
"asi": true,
"browser": true,
"loopfunc":true,
"expr":true,
"node": true,
"esnext": true,
"bitwise": true,
"curly": true,
"immed": true,
"latedef": false,
"expr": true,
"eqeqeq": false,
"eqnull": false,
"newcap": true,
"noarg": true,
"undef": true,
"proto": true,
"strict": false,
"smarttabs": true
4.&[代码]js校验规则说明&&&&
bitwise 禁用位运算符，位运算符在 JavaScript 中使用较少，经常是把 && 错输成 &
循环或者条件语句必须使用花括号包围
强制使用三等号
兼容低级浏览器 IE 6/7/8/9
禁止重写原生对象的原型，比如 Array ， Date
latedef 禁止定义之前使用变量，忽略 function 函数声明
构造器函数首字母大写
禁止使用 arguments.caller 和 arguments.callee ，未来会被弃用， ECMAScript 5 禁止使用 arguments.callee
为 true 时，禁止单引号和双引号混用
变量未定义
变量未使用
最多参数个数
最大嵌套深度
maxcomplexity
复杂度检测
asi 宽松选项
控制“缺少分号”的警告
忽略 debugger
控制 eval 使用警告
检查一行代码最后声明后面的分号是否遗漏
检查不安全的折行，忽略逗号在最前面的编程风格
检查循环内嵌套 function
检查多行字符串
person['name'] vs. person.name
new function () { ... } 和 new O
在非构造器函数中使用 this
预定义一些全局变量 预定义全局变量 document ， navigator ， FileReader 等
定义用于调试的全局变量： console ， alert
jquery(node)
定义全局变量
开源中国-程序员在线工具：
相关的代码(1355)
0回/1357阅
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
开源从代码分享开始
宋将-intv的其它代码