less css用法思維導圖

標籤：des   style   blog   http   color   java   使用   strong   

Less 是一個Css 先行編譯器,可以擴充Css語言,添加功能如允許變數(variables),混合(mixins),函數(functions) 和許多其他的技術，讓你的Css更具維護性，主題性，擴充性。

關於其具體用法，根據大漠文章，筆者總結如下：

放大局部後的：（空間有限，所以隱藏了所有的執行個體代碼示範）

 

還有一點很重要：

下面結合自己的練習過程，具體敘述：

1：檔案目錄情況：

在用戶端使用時候要這樣引入HTML結構中：

注意：“Less樣式檔案一定要放在less指令檔之前”。

2：原始碼

2.1 HTML：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link rel="stylesheet/less" type="text/css" href="style.less">        <script src="js/less.js" type="text/javascript"></script>        <title>less css應用</title>    </head>    <body>        <h1>青青flye</h1>        <p>行到水窮處，坐看雲起時.</p>        <p class="p2">喜歡中國風，熱愛大前端，拒絕平庸。</p>        <p class="p3">喜歡中國風，熱愛大前端，拒絕平庸。</p>        <div class="box1"></div>        <div class="box2"></div>        <div id="header">            <h1><a href="">青青flye</a></h1>            <p>less css練習</p>        </div>        <div id="header2">            <h1><a href="">青青flye</a></h1>            <p>less css練習</p>        </div>        <div id="header3">            <h1><a href="">青青flye</a></h1>            <p>less css練習</p>        </div>        <div id="header4">            <h1><a href="">青青flye</a></h1>            <p>less css練習</p>        </div>    </body></html>

style.less檔案：

less.js檔案：

less.js中代碼有2400多行。

一、變數：

變數允許單獨定義一系列通用的樣式，然後在需要的時候去調用。做全域樣式調整。

LESS源碼：

編譯後的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源碼：

#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;}

關於less CSS的用法，還有更進階的功能，如：字串插值，伺服器端使用配置，JavaScript 運算式，避免編譯等，這裡可以瞭解官方網站。