2022年了，你還在使用純css嗎？如果你還沒有接觸過樣式預(yù)處理器，那么希望這篇文章能幫到你。

簡(jiǎn)介（需要可參考，詳情可見官網(wǎng)）
Less：2009年出現(xiàn)，受SASS的影響較大，但又使用CSS的語法，讓大部分開發(fā)者和設(shè)計(jì)師更容易上手，在ruby社區(qū)之外支持者遠(yuǎn)超過SASS，其缺點(diǎn)是比起SASS來，可編程功能不夠，不過優(yōu)點(diǎn)是簡(jiǎn)單和兼容CSS，反過來也影響了SASS演變到了SCSS的時(shí)代，著名的Twitter Bootstrap就是采用LESS做底層語言的。
·  Sass：2007年誕生，最早也是最成熟的CSS預(yù)處理器，擁有ruby社區(qū)的支持和compass這一最強(qiáng)大的css框架，目前受LESS影響，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS。·  
·  Stylus：2010年產(chǎn)生，來自Node.js社區(qū)，主要用來給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS。
 
CSS預(yù)處理器是一種專門編寫css代碼的語言(工具)，CSS 預(yù)處理器能夠給我們帶來許多超能力，為我們帶來了幾項(xiàng)重要的能力，我都會(huì)一一列出。簡(jiǎn)單來說，預(yù)處理器有很多種，今天我們來說說less，樣式處理器能讓css也能像編程語言一樣寫，然后再將其轉(zhuǎn)換為css。使用CSS預(yù)處理器， 可以提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性。
 
 
使用方法：
首先使用樣式預(yù)處理器需要?jiǎng)?chuàng)建less樣式表，擴(kuò)展名為less，寫完樣式保存會(huì)自動(dòng)生成css文件。在這個(gè)文件內(nèi)編寫less代碼。html文件中引入css文件即可。
 
文件切分CSS 預(yù)處理器擴(kuò)展了 @import 指令的能力，通過編譯環(huán)節(jié)將切分后的文件重新合并為一個(gè)大文件。這一方面解決了大文件不便維護(hù)的問題，另一方面也解決了一堆小文件在加載時(shí)的性能問題。



變量聲明可復(fù)用樣式，比如說頁面多個(gè)模塊需要使用同一個(gè)變量，我們可聲明一個(gè)變量復(fù)用。
變量使用@變量名:數(shù)據(jù)。



樣式層級(jí)嵌套 



下面本圖是less文件轉(zhuǎn)換完的css文件，小伙伴們，這樣是不是更方便我們快速寫好樣式呢？
 

 
mixin式復(fù)用性混入用法，將一段css代碼，引入到另一個(gè)選擇器中，提高復(fù)用性。


 
選擇符嵌套用于表示當(dāng)前選擇的元素的本身，選擇符嵌套的本元素，主用于給偽類添加樣式更方便。




 
總結(jié)：我看很多初學(xué)樣式預(yù)處理的小伙伴們，經(jīng)常對(duì)一些符號(hào)記混。
@可用來引入文件
@Import “地址”
@聲明遍歷
&表示當(dāng)前嵌套的元素
（）混合元素可用（）調(diào)用