### **scss公共变量** ``` @import'~@/assets/css/variable.scss'; .class{ color: $font-color-05 /*在样式中引入对应颜色*/ } ``` ### **scss混入** ``` @import'~@/assets/css/mixins.scss'; .class{ width: 10em; @include ellipsis();/*在样式中引入文本超出省略*/ } ``` - 常用混入： ``` @include placeholderColor(#fff); // 修改input placeholder文字颜色 @include ellipsisMultiline(3); //多行文字超出显示省略号 @include ellipsis(); // 文字一行超出显示省略号 @include bgImage($path); // 背景图片(若采用字体矢量图标，无需使用些方法) @include center(); // 让子元素 居中布局 @include border-1px($color, $position, $border-radius) // 一像素边框 @include border-top-1px($color); // 一像素上边框 @include border-bottom-1px($color); // 一像素下边框 @include border-top-bottom-1px($color); // 一像素上下边框 @include border-left-1px($color); // 一像素左边框 @include border-right-1px($color); // 一像素右边框 ``` ### **阿里图标** ``` <!-- 引入阿里矢量图标 href在阿里图标库，切换为symbol, 复制代码 可给图标设置css样式 --> <svg class="icon" aria-hidden="true" style="color:red">   <use xlink:href="#icon-xihuan"></use> </svg> ```