CSS预处理语言-less 的使用

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

Less的编译处理

作为一门CSS预处理语言，它并不像CSS一样能直接使用，而是需要编译后使用，如何编译呢，下面分node 和浏览器端两种情况解释。

浏览器端：

浏览器端使用less，只需要做如下两步：

1.引如Less

使用link标签引入less，需要注意的是 rel="stylesheet/less"

<link rel="stylesheet/less" type="text/css" href="styles.less" />

2.引入less解析用的js文件

<script src="less.js" type="text/javascript"></script>

3.声明解析，要在引入 less.js前进行声明。

<script>

　　 less = {

　　　　env: "development",

　　　　async: false,

　　　　fileAsync: false,

　　　　poll: 1000, functions: {},

　　　　dumpLineNumbers: "comments",

　　　　relativeUrls: false, rootpath: ":/a.com/"

　　};

</script>

完事，就这么简单，但是 由于编译解析less需要消耗一定的性能，且渲染也会有延迟，所有推荐使用node或其他第三方工具进行编译后使用。

需要注意的是 js文件必须要在less文件后引入。

less.js 下载地址在这里

node端

1. 使用npm安装less

$ npm install -g less

2.编译输出

使用命令行调用less编译器进行编译

$ lessc styles.less

这会输出到stdout编写CSS。将CSS结果保存到所选择使用的文件中

$ lessc styles.less styles.css

输出后你可以使用编译的style.css 啦。

less的使用方法

1.注释

　　　less 的注释分为两种：  /*  注释内容 */  和  //  注释内容   。

/* */  为块注释  可以注释一行或多行，

//    为行注释，只能注释一行，而且这种注释在编译处理时会被编译掉。

2.变量

　　less中很方便的一个功能就是定义变量，当css多处用到同一个值的时候，如果不用变量，那么改动它需要改动100处，而使用变量的话，只需要修改变量的值便可以全局修改了，是不是很方便呢。

和PHP类似 变量都是以@开头，无论是定义还是使用，使用如下  ：

// 定义变量
@cell_width：100px；

//在使用的时候就可以这样使用

.cell{
　　width:@cell_width;

}

3.混合

和css差别并不大，同样使用 选择器 后 带大括号 的形式，牛逼的是大括号里还可以写  选择器 +大括号 的形式，

在不考虑渲染优化的情况下可以无限套下去，但是考虑到浏览器渲染任务繁重，往往最多只套4层。

.body{
　　width:100%；
   .section{
　　　　border:1px solid #000;
　　}

}

/*
解析后的效果是下面这样的
*/

.body{
　　width:100%；

}

.body .section{

　　　　border:1px solid #000;
　　}

除了套用，还可以引用：

.section{
　　　　border:1px solid #000;
　　}

.body{
　　width:100%；
   .section；

} /* 解析后的效果是下面这样的 */ 

.body{
 　　width:100%；

　　border:1px solid #000;

} 

除了以上的，还能使用传参，哈哈哈

.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.cell{
    width: 100%;
    //可以不传参数,默认用5px
    .border_radius(10px)
}

可以说是非常灵活了，随便套随便引。

了解了以上的这些，就可以在实战中使用Less进行项目开发啦！

（完）