CSS預處理器Less怎么用

本篇內容主要講解“CSS預處理器Less怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS預處理器Less怎么用”吧!

　　CSS預處理器

　　為什么要有CSS預處理器

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

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

　　什么是CSS預處理器

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

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

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

　　CSS預處理器技術已經非常成熟，而且也涌現出了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、SwithchCSS、CSSCacheer、DTCSS等。如此之多的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>.rowa{

　　color:#f40;}.container>.rowa: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>.rowa{color:#f40;}.container>.rowa:hover{color:#f50;}.containerdiv{width:100px;}.containerdiv.hello{background-color:#00f;}

到此，相信大家對“CSS預處理器Less怎么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！