less

Less使用心得

初识less就被其函数式编程css深深吸引了，而函数式编写css带来的好处不言而喻，复用，复用，还是复用。话不多说下面简单介绍下个人使用less的心得

首先网上有很多less的安装教程，这边不多做介绍，我才用的是比较简单的less引入方式，只需要在头部script src一下就好，当然如同预编译一般，肯定是要注意less文件与less.js的位置。

当然这边有一小点要提醒注意下，因为引入的less文件是要交给less.js编译的，这时候Chrome大哥出于一系列安全机制，卡死了less在本地预览的资格。

如果想本地浏览两个方法：1.用火狐2.配置个node环境，安装anywhere模块，这样我们就可以本地预览了，当然同理本地配置服务器环境一样能解决问题

废话不多说，我们来看看less究竟有怎么样的神通

当然如果是客户端的less就完全没有这些问题了，本身编译完就会导出一个组合后的css，而后期调试只需要改改工程文件，再次导出就好

1.变量代替及四则运算

变量的引入，除了简化冗长的写法，同时为复用增加了便利，而四则运算让人有中写脚本语言的感觉

@gray:#DDC;

@normal：18px;

@center:translate(-50%, -50%);

.index{color:@gray;font-size:@normal}.test{background-color:@gray;width:100px;height:100px;transform:@center;-webkit-transform:@center;font-size:@normal+1px}

2.层次性代码

这边就贴上我之前写过的一段代码，代码首先层次性很强，其次这种写法避免了.index_switchPart span{.....}，亲子选择器，后代选择器这些冗长的写法，不仅方便调试，而且很大程度上节省了时间

.index_switchPart{    width:100%;    position:relative;    height:4.4rem;    background-color:white;    span{

        position:absolute;        top:50%;        left:6%;        transform:@tf_left;        -webkit-transform:@tf_left;        color:@pink_text;

        }    div{        width:3rem;        height:3rem;        background: url("../img/switch.png") no-repeat right center;        position:absolute;        right:6%;        top:50%;        transform:@tf_left;        -webkit-transform:@tf_left;        background-size: 100%;        border: none;        outline: none;

    　　}    }

3.函数式编程

如果谈到css为人头疼的诟病，那肯定要提到兼容，各大浏览器霸主的竞争，最后为难的终究是我们这些小码农，哈哈。less对于兼容代码的复写无异于是新世纪的福音啊，稍微有点js，c基础的都能入门

.box(@color,@frist,@second,@third,@fouth){    -moz-box-shadow:@color @frist @second @third @fouth; /* Firefox */    -webkit-box-shadow:@color @frist @second @third @fouth; /* Safari 和 Chrome */    box-shadow: @color @frist @second @third @fouth; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */}.index{    width:100px;    height: 80px;    background-color:red;    .box(gray,1px,1px,1px,1px);}