CSS預(yù)處理器之Less怎么用

這篇文章主要介紹CSS預(yù)處理器之Less怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司專注于撫州企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城開(kāi)發(fā)。撫州網(wǎng)站建設(shè)公司,為撫州等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

CSS 預(yù)處理器

為什么要有 CSS 預(yù)處理器

CSS基本上是設(shè)計(jì)師的工具，不是程序員的工具。在程序員的眼里，CSS是很頭痛的事情，它并不像其它程序語(yǔ)言，比如說(shuō)PHP、Javascript等等，有自己的變量、常量、條件語(yǔ)句以及一些編程語(yǔ)法，只是一行行單純的屬性描述，寫(xiě)起來(lái)相當(dāng)?shù)馁M(fèi)事，而且代碼難以組織和維護(hù)。

很自然的，有人就開(kāi)始在想，能不能給CSS像其他程序語(yǔ)言一樣，加入一些編程元素，讓CSS能像其他程序語(yǔ)言一樣可以做一些預(yù)定的處理。這樣一來(lái)，就有了“CSS預(yù)處器（CSS Preprocessor）”。

什么是 CSS 預(yù)處理器

是 CSS 語(yǔ)言的超集，比CSS更豐滿。

CSS 預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是：用一種專門(mén)的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。

通俗的說(shuō)，CSS預(yù)處理器用一種專門(mén)的編程語(yǔ)言，進(jìn)行Web頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。CSS預(yù)處理器為CSS增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題，例如你可以在CSS中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)等等在編程語(yǔ)言中的一些基本特性，可以讓你的CSS更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

CSS預(yù)處理器技術(shù)已經(jīng)非常成熟，而且也涌現(xiàn)出了很多種不同的CSS預(yù)處理器語(yǔ)言，比如說(shuō)：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預(yù)處理器，那么“我應(yīng)該選擇哪種CSS預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門(mén)話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術(shù)論壇上，很多人為此爭(zhēng)論不休。相比過(guò)計(jì)我們對(duì)是否應(yīng)該使用CSS預(yù)處理器的話題而言，這已經(jīng)是很大的進(jìn)步了。

到目前為止，在眾多優(yōu)秀的CSS預(yù)處理器語(yǔ)言中就屬Sass、LESS和Stylus最優(yōu)秀，討論的也多，對(duì)比的也多。本文將分別從他們產(chǎn)生的背景、安裝、使用語(yǔ)法、異同等幾個(gè)對(duì)比之處向你介紹這三款CSS預(yù)處理器語(yǔ)言。相信前端開(kāi)發(fā)工程師會(huì)做出自己的選擇——我要選擇哪款CSS預(yù)處理器。

less 的介紹，less 是一款比較流行的預(yù)處理 CSS，支持變量、混合、函數(shù)、嵌套、循環(huán)等特點(diǎn)。

less 的語(yǔ)法

注釋

less 的注釋可以有兩種。

第一種注釋：模板注釋

// 模板注釋 這里的注釋轉(zhuǎn)換成CSS后將會(huì)刪除

因?yàn)?less 要轉(zhuǎn)換為 css才能在瀏覽器中使用。轉(zhuǎn)換成 css 之后，這種注釋會(huì)被刪除（畢竟 css 不識(shí)別這種注釋）。

第二種注釋：CSS 注釋語(yǔ)法

/* CSS 注釋語(yǔ)法 轉(zhuǎn)換為CSS后讓然保留 */

總結(jié)：如果在less中寫(xiě)注釋，我們推薦寫(xiě)第一種注釋。除非是類似于版權(quán)等內(nèi)容，就采用第二種注釋。

定義變量

我們可以把重復(fù)使用或經(jīng)常修改的值定義為變量，在需要使用的地方引用這個(gè)變量即可。這樣可以避免很多重復(fù)的工作量。

（1）在less文件中，定義一個(gè)變量的格式：

@變量名: 變量值;        //格式@bgColor: #f5f5f5;      //格式舉例

（2）同時(shí)，在 less 文件中引用這個(gè)變量。

最終，less文件的完整版代碼如下：

main.less：
// 定義變量@bgColor: #f5f5f5;// 引用變量body{    background-color: @bgColor;}

我們將上面的less文件編譯為 css 文件后（下一段講less文件的編譯），自動(dòng)生成的代碼如下：

main.css：
body{    background-color: #f5f5f5;}

使用嵌套

在 css 中經(jīng)常會(huì)用到子代選擇器，效果可能是這樣的：

.container {
  width: 1024px;}.container > .row {
  height: 100%;}.container > .row a {
  color: #f40;}.container > .row a:hover {
  color: #f50;}

上面的代碼嵌套了很多層，寫(xiě)起來(lái)很繁瑣?？扇绻?less 的嵌套語(yǔ)法來(lái)寫(xiě)這段代碼，就比較簡(jiǎn)潔。

嵌套的舉例如下：

main.less:
.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

將上面的less文件編譯為 css 文件后，自動(dòng)生成的代碼如下：

main.css
.container {    width: 1024px;}.container > .row {    height: 100%;}.container > .row a {    color: #f40;}.container > .row a:hover {    color: #f50;}.container div {    width: 100px;}.container div .hello {    background-color: #00f;}

以上是“CSS預(yù)處理器之Less怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：CSS預(yù)處理器之Less怎么用
網(wǎng)站網(wǎng)址：http://www.muchs.cn/article14/gehdge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)