less 通过命令行编译成css以及less语法

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

-----------------------------------引用----------------------

<!-- style.less文件就是样式表文件，并且style.less必须放在less-1.0.22.min.js文件前加载，原理后面介绍 -->

<link rel="stylesheet/less" href="style.less" />  

<script src="less-1.0.22.min.js"></script>

用命令行编译Less源文件需要先安装node.js，官方下载地址：http://nodejs.org/

使用npm包管理工具安装Less编译器

npm install less -g

参数-g 是安装到全部环境中的指令，如果只想安装特定版本，可使用如下命令

npm install less@1.6.2 -g

Less编译器用法：

Usage: lessc [option option=parameter ...] <source> [destination]

示例：

E:\Dev\Dev2015\less compile dir>lessc bootstrap.less bootstrap.css

这样就会生产.css文件

压缩输出文件大小

lessc -x bootstrap.less bootstrap.css

通过使用-x参数，来压缩输出文件的大小，下面是压缩前后的文件大小

-x 压缩主要是删除多余空白实现的

获取帮助

lessc --help

或

lessc -h

Less语法

  LESS写法:

1 2 3 4 5 6 7 8 9

. red {    color : red ; border : 1px  solid  red ; }   .class 2 {     width : 100px ; font-size : 12px ;     /*直接inlcude .red的规则*/     . red }

嵌套规则:

　　一般css的写法：

1 2 3

#header{ color : red ;} #header .logo{backgroud-image: url (logo.gif);} #header li{ display : block ;}

      LESS写法:

1 2 3 4 5 6 7 8 9

#header{    color : red ;    .logo{        backgroud-image: url (logo.gif);     }     li{       display : block ;     } }

运算符：

　　LESS 写法:

1 2 3 4 5 6 7

@fontSize 12px ; .class 1 { font-size : @fontSize + 2 ; } .class 2 { font-size : @fontSize * 2 ; }

原理分析:

　　LESS js版本的实现方式是使用ajax获取style.less文件，然后根据该文件的规则生成最终浏览器能理解的css插入到html代码中。所以就出现前面说过的<link rel="stylesheet/less" href="style.less" />必须在js前面。

总结:

　　LESS JS版本的实现原理，是每次请求都需要通过JS去动态生成原始的css，如果css比较大的话，对于客户端的性能影响比较大，所以个人觉的less的js版本实用性不强。

　　不知道LESS 的ruby版本的实现原理是怎么样的，我认为如果真的觉得less方式可以提高css的开发效率，到是可以参考它的代码实现一套java或net的源代码，在程序启动的时候一次根据.less文件生成所有的css文件，而不是每次请求都用js动态生成。