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/ 有空的話，可以去看看，可以說還是蠻良心了