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

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

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

用命令行编译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语法

1、变量

格式：@变量名: 值，定义完成后可以重复使用

@color:red;//定义变量

.nav{

background-color:@color; //使用变量

}

2、混合

我们可以像使用函数一样来使用CSS

.box-sizing(){ //定义一个函数

box -sizing:border-box;

-wibkit-box-sizing:border-box;

-moz-box-sizing:border-box;

}

.footer{

.box-sizing; //调用一个函数

}

3、嵌套

嵌套可以非常方便的管理我们的CSS层级关系

.header{//定义给header的属性

height:80px;

nav{ //定义给nav的属性

overflow:hidden;

a{ 定义给a标签的属性

display:block;

width:100px;

height:40px;

}

}

}