### 简要说明 作为`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; } ```