### 簡要說明 作為`css`預處理器，讓編寫者更方便的處理樣式，或者在維護性方面下功夫，主要通過層級關系中，通過抽取公共變量、函數或者樣式模塊混入而組成，還有輔助性`&`等父級選擇方式。 ### 1、嵌套使用 嵌套使用，是最常用的方式，也便于維護，只需要寫在父級下層層嵌套即可。 ``` .home-container { .home-left { .logo { // ... } } .home-center {} .home-right {} } ``` ### 2、變量，$xxx ``` $w_logo: 200px; $h_logo: 80px; .home-container { .home-left { .logo { width: $w_logo; height: $h_logo; } } .home-center {} .home-right {} } ``` ### 3、混入Mixin * **方式一** ``` @mixin large?{ color:?red; } .home?{ @include large; } ``` * **方式二** ``` @mixin links?{ a?{ color:?#fff; background-color:?red; ??} } @include links; ``` ### 4、函數方式 ``` @function widthFn($n)?{ @return $n?+?100px; } .home-container?{ width:?widthFn($n:500); } ``` ### 5、父級選擇：& ``` .home-container { .home-left { .logo { &:hover { // ... } // 方式一 } // .logo:hover { } // 方式二 } } ``` ### 6、導出 我相信下面這段樣式，都不陌生，不錯，就是`vue-admin-template`管理后臺模板的公共樣式文件 ``` :export?{ ??menuText:?$menuText; ??menuActiveText:?$menuActiveText; ??subMenuActiveText:?$subMenuActiveText; ??menuBg:?$menuBg; ??menuHover:?$menuHover; ??subMenuBg:?$subMenuBg; ??subMenuHover:?$subMenuHover; ??sideBarWidth:?$sideBarWidth; } ```