很早之前就聽(tīng)說(shuō)過(guò)less了，但是一直拖著沒(méi)去學(xué)習(xí)。最近抽空看了less，其實(shí)語(yǔ)法很簡(jiǎn)單，看一遍基本就知道怎么用了。平時(shí)自己寫(xiě)頁(yè)面用less的話，感覺(jué)是方便了些，但是難道less的好處就只是這樣？

　　剛好最近也在學(xué)習(xí)bootstrap，發(fā)現(xiàn)其源文件就是用less寫(xiě)的，看了之后，我才深深體會(huì)的less的好處與強(qiáng)大，對(duì)less也有了更深一層的理解。

1、Less是什么？

　　LESS CSS是一種動(dòng)態(tài)樣式語(yǔ)言，屬于CSS預(yù)處理語(yǔ)言的一種，它使用類似CSS的語(yǔ)法，為CSS的賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、繼承、運(yùn)算、函數(shù)等，更方便CSS的編寫(xiě)和維護(hù)。

　　有些人可能沒(méi)有接觸過(guò)less，那我們就先可以簡(jiǎn)單的看看less的一些特性。

2、語(yǔ)言特性快速預(yù)覽：

變量：

變量允許我們單獨(dú)定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用。所以在做全局樣式調(diào)整的時(shí)候我們可能只需要修改幾行代碼就可以了。

LESS源碼：

@color: #4D926F;#header {color: @color; } h2 {color: @color; }

編譯后的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代碼，如果你愿意的話可以操作屬性值。

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

　　想具體學(xué)習(xí)less，可以訪問(wèn) http://www.1024i.com/demo/less/document.html?

3、bootstrap中l(wèi)ess的使用

　　下載 Bootstrap，解壓縮文件。Bootstrap 的 Less 組件位于less目錄下，其中包含至少20多個(gè)less文件，那為什么要分成這么多個(gè)呢？主要是方便開(kāi)發(fā)，后期也便于維護(hù)，另外就是便于用戶修改樣式。

　　開(kāi)發(fā)人員在編寫(xiě)樣式的時(shí)候，首先對(duì)頁(yè)面的元素和作用效果進(jìn)行分離，比如form，button，responsive，tables等等。然后分別編寫(xiě)，雖然是獨(dú)立編寫(xiě)，但是有些樣式是全局要用的，比如提醒的顏色，頁(yè)面的背景色都是同一種。但是less文件很可能是多個(gè)人同時(shí)編寫(xiě)的，那怎么來(lái)確保樣式的統(tǒng)一呢。這時(shí)候，less的作用就顯現(xiàn)出來(lái)了。

　　我們可以看看 variables.less 文件里的內(nèi)容，下面節(jié)選了一部分：

// Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff;/* .........省略部分..................... */// Typography // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;@baseFontSize: 14px; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily;@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor

從上面可以看出，開(kāi)發(fā)人員已經(jīng)為一些常用的樣式變成變量的形式。并且每一個(gè)變量的名字都很具體，只要一看就知道這是要設(shè)置什么。那具體是怎樣用的呢？我們來(lái)看看buttons.less文件，同樣是節(jié)選部分：

// Base styles // --------------------------------------------------// Core .btn {display: inline-block;.ie7-inline-block();padding: 4px 12px;margin-bottom: 0; // For input.btnfont-size: @baseFontSize;line-height: @baseLineHeight;text-align: center;vertical-align: middle;cursor: pointer;.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));border: 1px solid @btnBorder;*border: 0; // Remove the border to prevent IE7's black border on input:focusborder-bottom-color: darken(@btnBorder, 10%);.border-radius(@baseBorderRadius);.ie7-restore-left-whitespace(); // Give IE7 some love.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");

怎么樣，是不是很方便。媽媽再也不用擔(dān)心我傻傻寫(xiě)錯(cuò)樣式了。上面只是列舉了了變量這一特性是使用，當(dāng)然你還可以在其他文件上發(fā)現(xiàn)其他特性的使用。

4、合并編譯less文件

文件都寫(xiě)好了，那怎么把它變成bootstrap.css呢。這里有個(gè)文件很重要，那就是bootstrap.less。最后只需要編譯該文件就可以得到css文件了。我們來(lái)看看里面到底寫(xiě)了啥：

// Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less";// CSS Reset @import "reset.less";// Grid system and page structure @import "scaffolding.less"; @import "grid.less"; @import "layouts.less";// Base CSS @import "type.less"; @import "code.less"; @import "forms.less"; @import "tables.less";// Components: common @import "sprites.less"; @import "dropdowns.less"; @import "wells.less"; @import "component-animations.less"; @import "close.less";// Components: Buttons & Alerts @import "buttons.less"; @import "button-groups.less"; @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less// Components: Nav @import "navs.less"; @import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less";// Components: Popovers @import "modals.less"; @import "tooltip.less"; @import "popovers.less";// Components: Misc @import "thumbnails.less"; @import "media.less"; @import "labels-badges.less"; @import "progress-bars.less"; @import "accordion.less"; @import "carousel.less"; @import "hero-unit.less";// Utility classes @import "utilities.less"; // Has to be last to override when necessary

　　bootstrap.less作用是將其他less文件全部引入，但是引入的順序還是有要求的。比如先引入 variables.less 和 mixins.less，是因?yàn)楹竺娴膌ess文件用到的less特性都是來(lái)自于這兩個(gè)文件的，如果不先引入，就會(huì)出現(xiàn)編譯錯(cuò)誤的問(wèn)題。然后再引入 reset.less 重置原有的樣式。接著引入網(wǎng)格系統(tǒng)的相關(guān)文件，這是整個(gè)網(wǎng)格系統(tǒng)建立的關(guān)鍵所在。然后引入一些公用的組件，特定組件，最后就是一些無(wú)家可歸但是比較有用的樣式樣式文件：utilities.less。

最后要做的就是編譯bootstrap.less生成bootstrap.css文件。

編譯方法:

• 如果你用的編輯器是 sublime text 安裝less2css插件，使用需要nodejs環(huán)境，還有一個(gè)less的插件（這個(gè)你在使用的時(shí)候會(huì)提醒你缺少某個(gè)插件，然后安裝就可以了）。
• 用gulp工具，參考我之前寫(xiě)的gulp系列學(xué)習(xí)筆記：

　　　　1、gulp學(xué)習(xí)筆記1

　　　　2、gulp學(xué)習(xí)筆記2

　　　　3、gulp學(xué)習(xí)筆記3

　　　　4、gulp學(xué)習(xí)筆記4

?

總結(jié)：

　　通過(guò)對(duì)bootstrap源碼文件的分析，既了解到了less的作用，也明白預(yù)處理器流行的原因。其中有很多思想是值得我們學(xué)習(xí)的。比如編寫(xiě)一個(gè)樣式框架要考慮哪些因素，如何分工合作等等。

　　如果你寫(xiě)的頁(yè)面，樣式比較少，不推薦使用less，有點(diǎn)麻煩。當(dāng)然如果你配置好相關(guān)環(huán)境了（比如工作中使用gulp或webpack來(lái)實(shí)現(xiàn)自動(dòng)化）也就不用在乎了。

　　如果你要寫(xiě)的樣式比較多，推薦使用less。

　　另外bootstrap官網(wǎng)提供樣式定制，如果變動(dòng)比較小的話，推薦直接修改bootstrap源文件，重新編譯就好。

?

總結(jié)

以上是生活随笔為你收集整理的通过bootstrap来学习less的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。