码迷,mamicode.com
首页 > 其他好文 > 详细

Less使用心得

时间:2016-05-11 22:01:54      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

初识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使用心得

标签:

原文地址:http://www.cnblogs.com/natureless/p/5483584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!