欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過(guò)bootstrap全面學(xué)習(xí)less

 更新時(shí)間:2016年11月09日 16:28:42   作者:huansky  
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)bootstrap學(xué)習(xí)less,LESS CSS是一種動(dòng)態(tài)樣式語(yǔ)言,屬于CSS預(yù)處理語(yǔ)言的一種,感興趣的朋友可以參考下

        很早之前就聽說(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è)精彩的專題:

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論