什麼是LESSCSS？如何使用？

零下一度

發布： 2017-07-26 11:17:07

原創

1505 人瀏覽過

什麼是LESSCSS

LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函數等，更方便CSS的編寫與維護。

LESSCSS可以在多種語言、環境中使用，包括瀏覽器端、桌面用戶端、服務端。

語言特性快速預覽：

變數：

變數允許我們單獨定義一系列通用的樣式，然後在需要的時候去呼叫。所以在做全域樣式調整的時候我們可能只要修改幾行程式碼就可以了。

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原始碼：

.rounded-corners (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

登入後複製

編譯後的CSS：

#header {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
    border-radius: 5px;
}
#footer {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;
    border-radius: 10px;
}

登入後複製

巢狀

我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這很大程度上減少了程式碼量，並且程式碼看起來更清晰的。

LESS原始碼：

巢狀

我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這很大程度上減少了程式碼量，並且程式碼看起來更加的清晰。

LESS原始碼：

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

登入後複製

　　編譯後的CSS：

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

登入後複製

函數與運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的複雜關係。 LESS中的函數一一映射了JavaScript程式碼，如果你願意的話可以操作屬性值。

LESS原始碼：

the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

登入後複製

編譯後的CSS：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

登入後複製

以上是什麼是LESSCSS？如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！