來認識下less css

簡介

感覺自己都out了，跟不上web時代的潮流了，前不久才剛接觸這玩意，發覺lesscss在某些方面還挺有用的，說白了這東西就是一種動態的樣式語言，語法類似於css，可以像java那樣進行編譯，生成你想要的對應css，並且less css擴展了css的動態行為。如，它可以設置變量（variables）、支持混合書寫模式（mixins）、支持嵌套規則（nested rules）、也可像js那樣進行屬性值的操作（operations）、像js函數那樣傳遞參數（functions）、 也具有變量的作用域（scope）等。

 

運行環境

 lesscss可以在客戶端，也可稱瀏覽器端（IE+、Webkit、Firefox）、服務器端（node.js ）上運行。

客戶端只需引入相關文件即可：如下所示

<link rel="stylesheet/less" type="text/css" href="less/demo.less">
<script src="js/less.js" type="text/javascript"></script>

其中less文件是你自己編寫的less文件，強烈推薦使用sublime text3編輯器進行編輯，高亮的語法以及強大的插件支持不得不讓人愛不釋手，下載地址：sublimetext3官網

less可到官網上下載，當前吧版本是1.4.2：less官網，還要注意這兩個文件的引入順序。

服務器端是通過nodejs的npm管理包來對less進行安裝和編譯的，具體nodejs這東西怎么用，最近也在探索中，沒linux環境，只好在win7環境下裝個unix模擬器cygwin來安裝nodejs了。又有得搞了，開始node吧。

 

特性以及使用

一、變量

less中的變量主要用於定義一些通用的樣式，變量還具有計算的功能，還可以定義一個變量名為變量，變量只能定義一次，並且會發生覆蓋的現象，如下所示：

@color: #ccc; // 定義變量
.demo { // 應用到元素中
    color: @color;
}

// 變量計算功能
@color: #ccc;
@light-color: @color + #111;
.demo {
    color: @light-color;
}

// 定義一個變量名為變量
@color: #ccc;
@highlight: "color";
.demo {
    color: @@highlight;
}

// 在less中的變量實際上就是一個“常量”，因為它們只能被定義一次
@color: #ccc;
@highlight: "color";
@color: #333; // 后面的@color覆蓋前面的@color，所以color輸出為#333
.demo {
    color: @@highlight;
}

具體經編譯后生成的css是咋樣的，在這就不列出了，不然的話會搞得一大沓東西，有興趣的童鞋可以自己動手測試下。

 

---

 二、混合模式

說白了，less的混合模式就是把一個class類作為變量引入到另一個class類中，還可以帶參數調用，如下所示：

// 定義一個類
.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
// 定義的類應用到另一個類中
#header {
    .rounded-corners; //使用默認參數5px
}
#footer {
    .rounded-corners(10px);//把10px傳遞給變量@radius
}

// 混合還有一個重要的變量：@arguments，該參數表示引用所以的參數變量
.boxShadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
#header {
    .boxShadow(2px, 2px, 3px, #f36);
}

注：上面的這些less例子是來自官網的，只是自己把它整理了一下。

 

---

三、嵌套規則

less中的嵌套就是在一個選擇器中嵌套另一個選擇器來實現繼承，類似於DOM樹的層次結構，使代碼更簡潔，如下所示：

#header {
    display: block;
    h1 {
        font-size: 26px;
        font-weight: bold;
        a {
            text-decoration: none;
            color: #f36;
            //注意"&"的用法：嵌套中有"&"時解析的是同一個元素或此元素的偽類，沒有"&"時解析的是后代元素
            &:hover { 
                text-decoration: underline;
                color: #63f;
            }
        }
    }
    p {
        font-size: 12px;
    }
}
// "&"的用法：
#header {
    &.fl {
        float: left;
    }
    .ml5 {
        margin-left: 5px;
    }
}
/*編譯生成的css
#header.fl {float: left;}
#header .ml5 {margin-left: 5px;}
*/

 

---

四、操作

less也具有操作功能，可針對任何數字、顏色、變量的操作，可以對其進行加、減、、乘、除或者更復雜的綜合運算。如下所示：

@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
    color: @base-color * 3;
    border: 1px solid desaturate(@red, 100%);
    border-width: @the-border @the-border*2 @the-border*3 @the-border;
    border-color: desaturate(@red, 100%) @red lighten(@red, 10%) darken(@red, 30%);
}
/*編譯后生成的css
#header {
    color: #333;
    border: 1px solid #4a4a4a;
    border-width: 1px 2px 3px 1px;
    border-color: #4A4A4A #842210 #B12E16 #000000;
}
*/

@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
    color: #888 / 4;
    height: 100% / 2 + @filler;
}
/*編譯后生成的css
#header {
    color: #222222;
    height: 60%;
}
*/

// 不同單位的操作
@var: 1px + 5;  //Less最終解析的值是“6px”
@size: 20px;
#header {
    border: @var solid red;
    width: @var + 50 * 2;
    height: (@var + 5) * 4;
}
/*編譯生成的css
#header {
    border: 6px solid red;
    height: 120px;
    width: 100px;
}
*/

 

---

五、函數

less的function功能主要是針對Color funtions，Less提供了多種變換顏色的功能，如下所示：

@base: #f04615;
#header {
    color: @base;
    background-color: fadein(@base, 10%);
    h1 {
        color: lighten(@base,20%);
        background-color: lighten(fadeout(@base,20%),5%);
        a {
            color: darken(@base,50%);
            background-color: spin(@base,10);
            &:hover {
                color: saturate(@base,30%);
                background-color: fadein(spin(@base,-5),20%);
            }
        }
    }
    p {
        color: desaturate(@base,60%);
    }
}
/*編譯后生成的css
#header {
    background-color: #F04615;
    color: #F04615;
}
#header h1 {
    background-color: rgba(242, 89, 45, 0.8);
    color: #F69275;
}
#header h1 a {
    background-color: #F06B15;
    color: #060200;
}
#header h1 a:hover {
    background-color: #F03415;
    color: #FF3E06;
}
#header p {
    color: #A56F60;
}
*/

 

---

 六、命名空間

less的命名空間類似於js的命名空間，把一些變量或mixins組織起來，並將其封裝，用的時候再提取出來，如下所示：

// bundle庫
#bundle {
    .button() {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {background-color: white;}
    }
    .tab {
        //...
    }
    .citation {
        //...
    }
}
// 比如操作header中的a樣式（和button類樣式一樣）
#header a {
    color: orange;
    #bundle > .button;
}

 

---

 七、變量作用域(范圍)

less中的變量也具有作用域，類似於js中的變量作用域環境，如下所示：

@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}
#footer {
    color: @var; // red
}

另外關於less的注釋方式：

1、單行注釋類似於js的注釋，使用"//"分隔符
2、多行注釋類似於css的注釋，使用"/*...*/"

 

結語

 以上只是對less的主要特性做了個總結，對於"服務器端的使用”，"模式匹配”，“導入文件和變量”，“字符串插值”等一些深入的東西還需慢慢探討，任重道遠。