标签：
初识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); }
4.数学函数
less官方文档同时还提供了一系列的数学函数，既然css中可以运算，可以调用类函数，这里数学函数的重要性就不言而喻了
这里就不一一介绍了，http://less.bootcss.com/functions/ 有空的话，可以去看看，可以说还是蛮良心了
标签：
原文地址：http://www.cnblogs.com/natureless/p/5483584.html
