### **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> ```