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);

}

4.数学函数

less官方文档同时还提供了一系列的数学函数，既然css中可以运算，可以调用类函数，这里数学函数的重要性就不言而喻了

这里就不一一介绍了，http://less.bootcss.com/functions/ 有空的话，可以去看看，可以说还是蛮良心了

巴特西

Less使用心得

最新文章

热门文章