CSS預處理器之Less詳解-html教學-PHP中文網

CSS預處理器之Less詳解

php中世界最好的语言

發布： 2018-02-28 10:13:56

原創

1538 人瀏覽過

CSS 預處理器

為什麼要有 CSS 預處理器

CSS基本上是設計師的工具，不是程式設計師的工具。在程式設計師的眼裡，CSS是很頭痛的事情，它並不像其它程式語言，比如說PHP、Javascript等等，有自己的變數、常數、條件語句以及一些程式設計語法，只是一行行單純的屬性描述，寫起來相當的費事，而且程式碼難以組織和維護。

很自然的，有人就開始在想，能不能給CSS像其他程式語言一樣，加入一些程式設計元素，讓CSS能像其他程式語言一樣可以做一些預定的處理。這樣一來，就有了「CSS預處器（CSS Preprocessor）」。

什麼是 CSS 預處理器

是 CSS 語言的超集，比CSS更豐滿。

CSS 預處理器定義了一種新的語言，其基本思想是：用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。

通俗的說，CSS預處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供專案使用。 CSS預處理器為CSS增加一些程式設計的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函數等等在程式語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於程式碼的維護等諸多好處。

CSS預處理器技術已經非常成熟，而且也湧現了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、 DT CSS等。如此之多的CSS預處理器，那麼「我該選擇哪種CSS預處理器？」也相應成了最近網路上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相較於過計我們對是否應該使用CSS預處理器的話題而言，這已經是很大的進步了。

到目前為止，在眾多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向你介紹這三款CSS預處理器語言。相信前端開發工程師會做出自己的選擇－我要選擇哪一款CSS預處理器。

less 的介紹，less 是比較流行的預處理 CSS，支援變數、混合、函數、巢狀、迴圈等特點。

less 的語法

註解

less 的註解可以有兩種。

第一種註解：範本註解

// 範本註解這裡的註解轉換成CSS後將會刪除

因為less 要轉換成css才能在瀏覽器中使用。轉換成 css 之後，這種註解會被刪除（畢竟 css 不辨識這種註解）。

第二種註解：CSS 註解語法

/* CSS 註解語法轉換為CSS後讓然保留*/

總結：如果在less中寫註釋，我們推薦寫第一種註釋。除非是類似版權等內容，就採用第二種註解。

定義變數

我們可以把重複使用或經常修改的值定義為變量，在需要使用的地方引用這個變數即可。這樣可以避免很多重複的工作量。

（1）在less檔案中，定義一個變數的格式：

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

（2）同時，在less 檔案中引用這個變數。

最終，less檔案的完整版程式碼如下：

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

登入後複製

我們將上面的less檔案編譯為css 檔案後（下一段講less檔的編譯），自動產生的程式碼如下：

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

登入後複製

使用嵌套

在css 中經常會用到子代選擇器，效果可能是這樣的：

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

登入後複製

上面的程式碼嵌套了很多層，寫起來很繁瑣。但如果用 less 的嵌套語法來寫這段程式碼，就比較簡潔。

嵌套的舉例如下：

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

登入後複製

將上面的less檔案編譯為css 檔案後，自動產生的程式碼如下：

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

登入後複製

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！