處理器:Sass/Less 基礎(chǔ)語法與實(shí)戰(zhàn))
1. 預(yù)處理器價值解決原生 CSS 無變量、無嵌套、無邏輯、難以復(fù)用的問題提升工程化效率。2. 核心通用能力變量定義主題色、尺寸統(tǒng)一管理嵌套語法結(jié)構(gòu)清晰、貼合HTML層級混合mixin復(fù)用代碼片段繼承、條件判斷、循環(huán)文件拆分、模塊化3. Sass vs LessLess基于JS、入門簡單、適合小型項(xiàng)目Sass功能更強(qiáng)、生態(tài)更好、企業(yè)主流、Vue/React 項(xiàng)目標(biāo)配4. 實(shí)戰(zhàn)常用語法示例// 變量 $primary: #1677ff; // 嵌套 .box{ color: $primary; :hover{ opacity: 0.8; } } // 混合 mixin center(){ display: flex; justify-content: center; align-items: center; } .wrap{ include center(); }