Less 動態樣式語言

1 篇文章 / 0 new
發表回應前，請先登入
週一, 2014-01-27 16:08
#1
author
Less 動態樣式語言
 Less , 中文官網 , less.js
LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函數等，更方便CSS的編寫和維護。可在多種語言、環境中使用，包括流覽器端、桌面用戶端、服務端。

► Free GUI編輯工具
koala WinLess simpleLess
► 簡介
變數：
變數允許我們單獨定義一系列通用的樣式，然後在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。
LESS源碼：
@color: #4D926F;
#header {
    color: @color;
}
h2 {
    color: @color;
}
編譯後的CSS：
#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}
混合（Mixins）
混合可以將一個定義好的class A輕鬆的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。
LESS源碼：
<span class="class">.rounded-corners (@radius: <span class="number">5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
    <span class="mixin">.rounded-corners;
}
#footer {
    <span class="mixin">.rounded-corners(<span class="number">10px);
}
編譯後的CSS：
#header {
    -webkit-border-radius: <span class="number">5px;
    -moz-border-radius: <span class="number">5px;
    -ms-border-radius: <span class="number">5px;
    -o-border-radius: <span class="number">5px;
    border-radius: <span class="number">5px;
}
#footer {
    -webkit-border-radius: <span class="number">10px;
    -moz-border-radius: <span class="number">10px;
    -ms-border-radius: <span class="number">10px;
    -o-border-radius: <span class="number">10px;
    border-radius: <span class="number">10px;
}
嵌套
我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，並且代碼看起來更加的清晰。
LESS源碼：
#header {
    h1 {
        font-size: <span class="number">26px;
        font-weight: bold;
    }
    p {
        font-size: <span class="number">12px;
        a {
            text-decoration: none;
            &amp;<span class="class">:hover {
                border-width: <span class="number">1px
            }
        }
    }
}
編譯後的CSS：
#header h1 {
    font-size: <span class="number">26px;
    font-weight: bold;
}
#header p {
    font-size: <span class="number">12px;
}
#header p a {
    text-decoration: none;
}
#header p a<span class="class">:hover {
    border-width: <span class="number">1px;
}
函數和運算
運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的複雜關係。LESS中的函數一一映射了JavaScript代碼，如果你願意的話可以操作屬性值。
LESS源碼：
@the-border: <span class="number">1px;
@base-color: #111;
@red:        #842210;
#header {
    color: (@base-color * <span class="number">3);
    border-left: @the-border;
    border-right: (@the-border * <span class="number">2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, <span class="number">10%);
}
編譯後的CSS：
#header {
    color: #333;
    border-left: <span class="number">1px;
    border-right: <span class="number">2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

from http://www.lesscss.net/article/home.html
頂
Free Web Hosting