【前端知識體系-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. 工具庫不同