前端開發(fā)技巧：如何高效從容的組織項(xiàng)目代碼？
來源：原創(chuàng) 時(shí)間：2017-04-26 瀏覽：0 次
最近在研究 css 里面的 less,它也是 css 的一種書寫形式,只是可以像 js 一樣 先定義之后直接引用使用,在大型項(xiàng)目里面用起來很方便。同時(shí)為以后代碼重構(gòu) 省去了很多時(shí)間,于是寫一篇總結(jié)性的文章記錄一下 less 的一些知識(shí)和使用方法。
一
less 初識(shí)
Less 作為 css 的一種擴(kuò)展,不僅完全兼容 css 語法,而且連續(xù)新增的特性也是 使用 css 語法。Less 擴(kuò)展 css 的動(dòng)態(tài)行為,比如說:設(shè)置變量(Variables)、混合書 寫兼容(mixins)、操作(operations)和功能(function)等等,最棒的是它使用了現(xiàn)有 的 css 語法,也就是說,你可以直接把你現(xiàn)有的 css 文件“style.css”直接改成 “style.less”,他也能正常工作。
二
less 使用范圍以及如何使用
1: 使用范圍
Less 現(xiàn)在可以在客戶端(如:IE、webkit、firefox)和服務(wù)器(如 node.js)上 運(yùn)行,我們還可以通過 LESS 的編譯器,將 LESS 文件編譯成為 CSS 文件,在 HTML 文章中引入使用。
2:如何使用
要成功的使用 less 需要一個(gè)腳本支持,我們把他稱為 less.js,Less.js 下載地 址:http://www.bootcdn.cn/less.js/ 這里有不同版本可供下載。將下載好的 less.js 放到你的項(xiàng)目中,然后引用我們就可以使用了,引用方法也特別簡單:
其實(shí)上圖就是客戶端的使用方法,src 里面的地址可以是相對(duì)路徑也可以是絕對(duì) 路徑。
這里特別提示一下 less.css 和 less.js 的引用順序的問題:
正確的引用方式:
錯(cuò)誤的引用方式:
特別強(qiáng)調(diào)一點(diǎn),客戶端使用 Less,一定要注意,“Less 樣式文件一定要放在 less 腳本文件前
三
less 包含什么?
剛才在初識(shí)里面也介紹了 less ,Less 是 CSS 語法的基礎(chǔ)上進(jìn)行了擴(kuò)展,主要包含:Variables,Mixins、Nested Rules、Functions & Operations、Client-side usage、 Server-side usage 等等,下面我們就針對(duì)這幾個(gè)部分,更好幫助我們了解和深入 的學(xué)習(xí) Less。
1:變量——Variables
Less 變量是指允許你在樣式中對(duì)于某一個(gè)常用的值進(jìn)行定義,然后應(yīng)用到樣 式中,這樣如果要更改的話只需要更改定義的值,就能起到全部更改的效果。
1>先來看一段代碼:
從上面代碼我們可以看出,變量是值級(jí)別的復(fù)用,可以將相同的值定義成變量統(tǒng) 一管理起來。該特性適用于定義主題,我們可以將背景顏色、字體顏色、邊框?qū)?性等常規(guī)樣式進(jìn)行統(tǒng)一定義,這樣不同的主題只需要定義不同的變量文件就可以 了。也同樣適用于重置樣式表,在 Web 開發(fā)中,我們往往需要屏蔽瀏覽器默認(rèn) 的樣式行為而需要重新定義樣式表來覆蓋瀏覽器的默認(rèn)行為,這里可以使用 LESS 的變量特性,這樣就可以在不同的項(xiàng)目間重用樣式表,我們僅需要在不同 的項(xiàng)目樣式表中,根據(jù)需求重新給變量賦值即可。
2>Less 中的變量還具有計(jì)算功能:
3>我們還可以定義一個(gè)變量名為變量,如
注:在 Less 中的變量實(shí)際上就是一個(gè)“常量”,因?yàn)樗鼈冎荒鼙欢x一次。 上面代碼明顯可以看出后面的@color 覆蓋了前面的@color。
2:混入——Mixins
混入其實(shí)就是一種嵌套,它充許你將一個(gè)類嵌入到另一個(gè)類中,而被嵌入的 這個(gè)類也稱為是一個(gè)變量。換句話說,你可以用一個(gè)類定義 CSS,然后把整個(gè)為 當(dāng)作一個(gè)變量來使用,嵌入到另一個(gè)類中當(dāng)作他的屬性;另外混入也像一個(gè)帶有 參數(shù)的 functions,如下在的例子:
注:這樣任何 CSS 的類或 ID 下的樣式都可以當(dāng)作變量,使用混入模式用來當(dāng)作 另一個(gè)元素的屬性值。
還有一種方法就是給 Mixins 不定我任何參數(shù),特別是在你想隱藏輸出的 CSS 規(guī) 則,但又想在別的規(guī)則中包含他的屬性,使用這種不帶參數(shù)的 Mixins 將非常有 用的,我們來看一段代碼:
Mixins 還有一個(gè)重要的變量:@arguments。@arguments 在 Mixins 中具是一個(gè)很 特別的參數(shù),當(dāng) Mixins 引用這個(gè)參數(shù)時(shí),他將表示所有的變量,當(dāng)你不想處理 個(gè)別的參數(shù)時(shí),這個(gè)將很有用,我們來看一個(gè)陰影的實(shí)例:
3:嵌套規(guī)則
嵌套規(guī)則主要是針對(duì)多層元素的樣式規(guī)則寫法,以前我們在多層元素中寫樣 式,要么從頭選下來,要么另外給這個(gè)元素加上類名或 id 名,但在 Less 中我們 不需要這樣操作了,我們只要使用他的嵌套規(guī)則就可以完成,我們來看一個(gè)簡單的實(shí)例:
使用 Less 的嵌套規(guī)則讓你的 CSS 代碼更簡潔,因?yàn)樗膶懛ň褪悄７?HTML 的 DOM 結(jié)構(gòu)來寫的。
從上在的實(shí)例代碼中,我都很清楚的了解到,嵌套規(guī)則可以讓我們寫樣式時(shí)能像 DOM 樹形那樣有結(jié)構(gòu)的去寫代碼,從而減了選擇器的層級(jí)關(guān)系,更主要的是這樣 使用我們的代碼更簡潔,更具有閱讀生,這種嵌套規(guī)則對(duì)我們操作偽元素更為方 便和重要,如:hover,:link,:focus 等。大家注意了,這里的&很重要,在 Less 中嵌套書寫中有沒有&區(qū)別是完全不一樣的效果,有&時(shí)解析的是同一個(gè)元素或此 元素的偽類,沒有&解析是后代元素,我們一起來看一段代碼:
4:命名空間——Namespace
有時(shí)候你想把一些變量或 mixin 組織起來,并將它封裝,想用的時(shí)候就把關(guān)鍵的一部分取出來,那么我們再 mixin 的基礎(chǔ)上將他的功能擴(kuò)展,看下例:
在 header 中如果 a 標(biāo)簽的樣式和.btn 的樣式一樣我們就可以這樣來操作:
如果頁面上有幾個(gè)部分的樣是完全一樣的,或者只是部分不同,我們就可以這樣 來寫,就如上面的代碼,#btnjh 可是以 web 頁面中已存在的元素,然后#header 中的 a 元素和#btnjh 中的.btn 樣式是一樣的,那么我們就可以把#btnjh 中 .btn 的所有樣式引用到#header 中的 a 元素上。
5:變量范圍——Scope
Less 中的變量和別的程序語言一樣,他的變量也有一個(gè)范圍概念,這個(gè)概念 就有點(diǎn)像局部變量和全局變量一樣,只是在 Less 中采取的是就近原則,換句話 說,元素先找本身有沒有這個(gè)變量存在,如果本身存在,就取本身中的變量,如 果本身不存在,就尋找父元素,依此類推,直到尋找到相對(duì)應(yīng)的變量,我們來看 個(gè)簡單的實(shí)例:
6:Less 的注釋——Comments
適當(dāng)?shù)淖⑨屖潜ＷC代碼可讀性的必要手段,LESS 對(duì)注釋也提供了支持,主要 有兩種方式:單行注釋和多行注釋,這與 JavaScript 中的注釋方法一樣,我們這 里不做詳細(xì)的說明,只強(qiáng)調(diào)一點(diǎn):LESS 中單行注釋 (// 單行注釋 ) 是不能顯示 在編譯后的 CSS 中,所以如果你的注釋是針對(duì)樣式說明的請使用多行注釋。
