通過(guò)bootstrap全面學(xué)習(xí)less
很早之前就聽說(shuō)過(guò)less了,但是一直拖著沒(méi)去學(xué)習(xí)。最近抽空看了less,其實(shí)語(yǔ)法很簡(jiǎn)單,看一遍基本就知道怎么用了。但是問(wèn)題又來(lái)了,那我在什么時(shí)候用less呢。平時(shí)自己寫頁(yè)面用less的話,感覺是方便了些,但是難道好處就只是這樣?
剛好最近也在學(xué)習(xí)bootstrap,發(fā)現(xiàn)其源文件就是用less寫的,看了之后,我才深深體會(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的編寫和維護(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è)呢?主要是方便開發(fā),后期也便于維護(hù),另外就是便于用戶修改樣式。
開發(fā)人員在編寫樣式的時(shí)候,首先對(duì)頁(yè)面的元素和作用效果進(jìn)行分離,比如form,button,responsive,tables等等。然后分別編寫,雖然是獨(dú)立編寫,但是有些樣式是全局要用的,比如提醒的顏色,頁(yè)面的背景色都是同一種。但是less文件很可能是多個(gè)人同時(shí)編寫的,那怎么來(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
從上面可以看出,開發(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.btn font-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:focus border-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)心我傻傻寫錯(cuò)樣式了。上面只是列舉了了變量這一特性是使用,當(dāng)然你還可以在其他文件上發(fā)現(xiàn)其他特性的使用。
4、合并編譯less文件
文件都寫好了,那怎么把它變成bootstrap.css呢。這里有個(gè)文件很重要,那就是bootstrap.less。最后只需要編譯該文件就可以得到css文件了。我們來(lái)看看里面到底寫了啥:
// 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è)插件,然后安裝就可以了)。
用前面說(shuō)的gulp工具,已經(jīng)給出教程了
總結(jié):
通過(guò)對(duì)bootstrap源碼文件的分析,既了解到了less的作用,也明白預(yù)處理器流行的原因。其中有很多思想是值得我們學(xué)習(xí)的。比如編寫一個(gè)樣式框架要考慮哪些因素,如何分工合作等等。
如果你寫的頁(yè)面,樣式比較少,不推薦使用less,有點(diǎn)麻煩。當(dāng)然如果你配置好相關(guān)環(huán)境了(比如工作中使用gulp或webpack來(lái)實(shí)現(xiàn)自動(dòng)化)也就不用在乎了。
如果你要寫的樣式比較多,推薦使用less。
另外bootstrap官網(wǎng)提供樣式定制,如果變動(dòng)比較小的話,推薦直接修改bootstrap源文件,重新編譯就好。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript判斷表單為空及獲取焦點(diǎn)的方法
這篇文章主要介紹了JavaScript判斷表單為空及獲取焦點(diǎn)的方法,可實(shí)現(xiàn)表單提交時(shí)判斷表單是否為空及獲取響應(yīng)焦點(diǎn)的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-02-02FormValidate 表單驗(yàn)證功能代碼更新并提供下載
加入驗(yàn)證模式 4,同3,但是當(dāng)驗(yàn)證不通過(guò)時(shí),立即停止向下檢查。在模式3下,如果發(fā)生錯(cuò)誤,會(huì)把錯(cuò)誤記錄,并向下檢查,模式4就不向下檢查了2008-08-08javascript拖曳互換div的位置實(shí)現(xiàn)示例
一個(gè)div拖動(dòng)互換位置的demo,還有很大優(yōu)化的空間,利用dom元素的dragstart/ondragover/ondrop事件完成,感興趣的可以了解一下2021-06-06javascript的函數(shù)、創(chuàng)建對(duì)象、封裝、屬性和方法、繼承
從一開始接觸到j(luò)s就感覺好靈活,每個(gè)人的寫法都不一樣,比如一個(gè)function就有N種寫法2011-03-03深入理解javascript動(dòng)態(tài)插入技術(shù)
這篇文章介紹了javascript動(dòng)態(tài)插入技術(shù),有需要的朋友可以參考一下2013-11-11JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作,涉及到年、月、日、星期,感興趣的小伙伴們可以參考一下2016-01-01javascript 獲取radio的value的函數(shù) [已測(cè)]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺(tái)語(yǔ)言結(jié)合時(shí),一般用不到,但在純js環(huán)境下是必須的。2009-06-06