less css用法思维导图
Less 是一個(gè)Css 預(yù)編譯器,可以擴(kuò)展Css語(yǔ)言,添加功能如允許變量(variables),混合(mixins),函數(shù)(functions) 和許多其他的技術(shù)，讓你的Css更具維護(hù)性，主題性，擴(kuò)展性。
關(guān)于其具體用法，根據(jù)大漠文章，筆者總結(jié)如下：
放大局部后的截圖：（空間有限，所以隱藏了所有的實(shí)例代碼演示）
?
還有一點(diǎn)很重要：
下面結(jié)合自己的練習(xí)過(guò)程，具體敘述：
1：文件目錄情況：
在客戶(hù)端使用時(shí)候要這樣引入HTML結(jié)構(gòu)中：
注意：“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應(yīng)用</title></head><body><h1>青青flye</h1><p>行到水窮處，坐看云起時(shí).</p><p class="p2">喜歡中國(guó)風(fēng)，熱愛(ài)大前端，拒絕平庸。</p><p class="p3">喜歡中國(guó)風(fēng)，熱愛(ài)大前端，拒絕平庸。</p><div class="box1"></div><div class="box2"></div><div id="header"><h1><a href="">青青flye</a></h1><p>less css練習(xí)</p></div><div id="header2"><h1><a href="">青青flye</a></h1><p>less css練習(xí)</p></div><div id="header3"><h1><a href="">青青flye</a></h1><p>less css練習(xí)</p></div><div id="header4"><h1><a href="">青青flye</a></h1><p>less css練習(xí)</p></div></body> </html>style.less文件：
less.js文件：
less.js中代碼有2400多行。
一、變量：
變量允許單獨(dú)定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用。做全局樣式調(diào)整。
LESS源碼：
編譯后的CSS：
#header {color: #4D926F; } h2 {color: #4D926F; }混合（Mixins）
混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中，從而簡(jiǎn)單實(shí)現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用，就像使用函數(shù)一樣。
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; }嵌套
我們可以在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承，這樣很大程度減少了代碼量，并且代碼看起來(lái)更加的清晰。
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; }函數(shù)和運(yùn)算
運(yùn)算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運(yùn)算，這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。LESS中的函數(shù)一一映射了JavaScript代碼，如果你愿意的話(huà)可以操作屬性值。
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; }關(guān)于less CSS的用法，還有更高級(jí)的功能，如：字符串插值，服務(wù)器端使用配置，JavaScript 表達(dá)式，避免編譯等，這里可以了解官方網(wǎng)站。
轉(zhuǎn)載于:https://www.cnblogs.com/QingFlye/p/3886539.html
總結(jié)
以上是生活随笔為你收集整理的less css用法思维导图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 总结的比较好的vim命令
- 下一篇： 二分图搞法