less如何编译
❶ visual studio怎么编译less
工具》扩展》选择联机搜索less编译插件，我是已经安装了所以搜索略过了，安装后重启就行，打开编写less后生成一下
❷ less的LESS 原理及使用方式
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 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 后缀名不能省略。 LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
我们可以从下面的代码了解变量的使用及作用：
清单 3 LESS 文件 @border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }
经过编译生成的 CSS 文件如下：
清单 4. CSS 文件 .mythemes tableBorder { border: 1px solid #b5bcc7; }
从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。
该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
清单 5. LESS 文件 @width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }
经过编译生成的 CSS 文件如下：
清单 6. CSS 文件 #homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; } Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
我们先简单看一下 Mixins 在 LESS 中的使用：
清单 7. LESS 文件// 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; } #footer { .roundedCorners(10px); }
经过编译生成的 CSS 文件如下：
清单 8. CSS 文件 #header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：
清单 9. LESS 文件// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定义的样式选择器 #header { .borderRadius(10px); // 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器 }
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件 #header { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .btn { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件.borderRadius(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .btn { .borderRadius; }
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件 .btn { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
像 javaScript 中arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .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> </div>清单 17. LESS 文件 #home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } #center{ border:outset; height : 300px; width : 90%; #left{ border:outset; float : left; width : 40%; } #right{ border:outset; float : left; width : 40%; } } }
经过编译生成的 CSS 文件如下：
清单 18. CSS 文件 #home { color: blue; width: 600px; height: 500px; border: outset; } #home #top { border: outset; width: 90%; } #home #center { border: outset; height: 300px; width: 90%; } #home #center #left { border: outset; float: left; width: 40%; } #home #center #right { border: outset; float: left; width: 40%; }
从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
清单 19. LESS 文件a { color: red; text-decoration: none; &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素 color: black; text-decoration: underline; } }
经过编译生成的 CSS 文件如下：
清单 20. CSS 文件 a { color: red; text-decoration: none; } a:hover { color: black; text-decoration: underline; } 在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：
清单 21 . LESS 文件 @init: #111111; @transition: @init*2; .switchColor { color: @transition; }
经过编译生成的 CSS 文件如下：
清单 22. CSS 文件 .switchColor { color: #222222; }
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。
使用这些函数和 JavaScript 中使用函数一样。
清单 23 LESS 文件init: #f04615; #body { background-color: fadein(@init, 10%); }
经过编译生成的 CSS 文件如下：
清单 24. CSS 文件 #body { background-color: #f04615; }
从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。
LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。 同类框架还有 SASS :与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。
LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法。
❸ 如何使用lessc编译.less文件
使用lessc编译.less文件的方法
预备环境 iOS开发环境，Mac OS、XCode5.0以上版本；
下载HBuilder离线打包iOS版SDK（5+ SDK下载）。
SDK目录说明： HBuilder-Hello：离线打包演示应用；
Feature-iOS.xls：iOS平台各扩展Feature API对应的库文件列表；
❹ 如何用sublimeText3编写less并用Nodejs自动编译成css
1、安装Sublime 插件
（1）安装LESS插件：
因为Sublime不支持Less语法高亮，
所以，先安装这个插件，
方法1： (首先确保sublime上已安装了Package Control) 按住ctrl+shift+p>install Package>输入less按Enter
方法2：直接下载后 解压文件 放到插件文件夹下（首选项-浏览插件 打开文件夹）
下载地址：https://github.com/danro/LESS-sublime
（2）安装LESS2CSS插件：
less2css的读音 其实就是less to css
这个插件的作用是
当保存less文件的时候自动生成同名的css文件；
当保存less文件的时候提示编译错误信息；
批量编译项目目录下的所有less文件为css文件。
安装：
方法1：ctrl+shift+p>install Package>输入less2css按Enter
方法2：直接下载：https://github.com/timdouglas/sublime-less2css
解压文件 放到插件文件夹下
但是我们还要让sublime支持less并自动编译，所以还需以下步骤：
2、安装Node.js
首先先配置一下环境，
less需要nodejs支持，
所以我们先要安装一下nodejs
到nodejs官网下载就可以了：https://nodejs.org/en/
3、安装less
运行-cmd：
输入命令行：
npm install less -g
-g 代表着全局安装less
之后在 Sublime 里面建less文件时，会有一个错误
LESS: Unable to interpret argument clean-css
这是因为还需要一个插件
less-plugin-clean-css插件的安装
命令行为：
npm install less-plugin-clean-css -g
接着重启一下sublime，就搞定啦！
❺ less 预编译
安装
npm install -g less
转换 文件+转换后文件名字 (会在当前文件夹生成文件)
lessc styles.less styles.css
+压缩
lessc --clean-css styles.less styles.min.css
使用
@color: #ccc; 变量
.h1{
color:@color;
}
混合(或者叫less的函数)
这里是函数
.rounded(@radius:5px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
混合使用
.header{
.rounded; 使用默认的5px圆角
.rounded(10px); 设置10px圆角
}
.rounded(@top-left,@top-right,@bottom-right,@bottom-left){
border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
-webkit-border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
-moz-border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
}
.header{
.rounded; 使用默认的圆角
.rounded(10px,10px,10px,10px); 设置左上-右上-左下-右下的圆角
}
嵌套规则
.title{
}
.span{
}
}
.content{
&:after{ //&代表自己 所以可以用伪类元素
}
}
函数与运算
@the-border: 1px;
@base-color: #111;
@red: #842210;
}
降级 如@red*10%的颜色
}
❻ 怎样用node.js编译less文件
输入npm install -g less，完成全局安装less编译模块
输入lessc （需要编译的less文件名称及路径）>（编译生成的CSS文件名称及路径）：
❼ 怎么使用Less/Sass编译工具koala
一、SASS调试插件的方法
如需调试功能，请在编译输出的时候输出debug信息，那样解析的css文件中就会包含debug信息，然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件，而不是解析后的css文件。
如果光做好SASS的准备工作还不够，还需要让浏览器支持SASS。那么就需要一个浏览器的插件才能让浏览器识别SASS，从而方便开发人员进行开发。
如需调试功能，请在编译输出的时候输出debug信息，那样解析的css文件中就会包含debug信息，然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件，而不是解析后的css文件。(如图1-1)
图1-1
如果你的css文件中没有以@media -sass-debug-info开头的代码，说明没有输出debug信息。请重新使用koala工具编译你的scss文件，并确定已经勾选了debug信息这个选项。
在火狐中调试，只需要再下载FireSass→即可。
二、编译工具koala的安装
1、进入页面
2、根据系统下载所需要的koala的版本
3、然后在下载文件夹中安装下载的EXE文件，即可安装成功
三、编译工具koala的优点
1、多语言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
2、实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。
3、编译选项：既可统一设置文件的编译选项，也可单独设置某个文件的编译选项。
4、强大的文件右键功能：右键文件元素，即可操作打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除六大常用功能。
5、错误提示：在编译时如果遇到语法的错误，koala将在右下角弹出错误信息，方便开发者定位代码错误位置。
6、跨平台：windows、linux、mac都能完美运行。
7、免费且负责：koala完全免费，而且作者很负责，有什么问题作者都会及时给予答复，意见什么的可以直接提交给作者，一般在下一个版本就能得到解决。
❽ h5 less怎样编译成css
看你用的IDE，先用npm安装好less插件，在webstorm可以配置less的文件位置
hbulider可以在预编译器中制定less插件将less编译为css
❾ bootstrap中文网上的less怎么用grunt编译
始做点功能吧：Grunt实现Less实时编译,web服务器。
实现这些功能，
主要的就是安装Grunt插件、编写配置文件的工作。
安装很简单。
主要讲解这个配置文件吧。
Gruntfile.js文件：
mole.exports = function(grunt) {
// include connect-include
var ssInclude = require("connect-include");
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
files: [{
expand: true,
cwd: './static/less',
src: ['**/*.less'],
dest: 'static/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
scripts: {
files: ['./static/less/**/*.less'],
tasks: ['less'],
options: {
spawn: false,
},
},
},
connect: {
server: {
options: {
port: 8080,
// 在connect与watch同时运行的时候，keepalive不能为true
，这里注释了keepalive，因为他的默认值就是false。
// keepalive: true,
// livereload: true,
base: './static',
middleware: function(connect, options) {
// Same as in grunt-contrib-connect
var middlewares = [];
var directory = options.directory || options.base[options.base.length - 1];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Here we insert connect-include, use the same pattern to add other middleware
middlewares.push(ssInclude(directory));
// Same as in grunt-contrib-connect
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
middlewares.push(connect.directory(directory));
return middlewares;
}
}
}
}
});
// Load the plugin that provides the "uglify" task.
// grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
// grunt.registerTask('default', ['uglify']);
grunt.registerTask('default', [ 'connect','watch']);
//使用watch，实时编译less成功
};
package.json文件：
{
"name": "Grunt-base",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-less": "^1.0.0",
"grunt-contrib-watch": "^0.6.1"
},
"dependencies": {
"connect-include": "^0.2.1"
}
}
插件安装完成，
写好项目配置文件，运行：
使用CMD命令行：grunt
浏览器访问http://127.0.0.1:8080/ 查看效果：
常见的构建工具：
Grunt、FIS（网络出品）等。
FIS也是一个不错的构建工具。
目前很多的Web前端构建工具都是Node.js写的。
我的项目结构：
注意事项：
如果你在使用中，grunt-contrib-connect、grunt-contrib-watch两个同时搭配使用，出现不能正常工作的问题，要注意这个connect的这个配置：keepalive: false。
如果没有配合grunt-contrib-watch的时候，keepalive配置往往是true，配合watch监听的话，这个值就是false。
❿ 如何使用lessc编译.less文件
这是一个简单的测试代码test.less，内容如下
@color: #4D926F;#header { color: @color;}h2 { color: @color;}
该文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\test.less。
启动node.js控制台，进入test.less文件所在的目录，输入lessc test.less > test.css命令，less文件就会被编译成css文件