【前端知識體系-CSS相關】CSS預處理器

1.常見的CSS預處理器有哪些？

[!NOTE]
css預處理器：用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做，可讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處

• Sass(Scss)：2007,ruby編寫
• Less: 2009，js編譯

1.1 使用流程？

1. 基於CSS的另一種語言
2. 經過工具編譯成CSS
3. 添加了不少CSS不具有的特性
4. 同時CSS文件的組織方式

1.2 預處理器的做用有哪些？

1. 幫助開發者更好組織CSS代碼（變量，mixIn）
2. 提升代碼的複用性
3. 代碼的可維護性加強

2.Less/Sass預處理器的功能？

1. 嵌套： 反映層級和約束
2. 變量和計算： 減小重複代碼
3. Extend和mixIn： 代碼片斷的抽離
4. 循環: 適用於複雜有規律的樣式
5. import：能夠實現CSS文件的模塊化

3.CSS預處理器的優缺點？

• 優勢： 提升代碼的複用率和可維護性
• 缺點： 引入了編譯的過程，有必定的學習成本

前端工程化：預處理再也不是惟一的手段了，可使用工程化構建工具進行處理

4.scss和less的區別？

1. 編譯環境不同
2. 變量符不同，Less是@，而Scss是$，並且變量的做用域也不同。
3. 輸出設置，Less沒有輸出設置，Sass提供4種輸出選項：
4. Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持。
5. 引用外部CSS文件
6. 工具庫不一樣