sass使用心得

sass版本

---

"sass": "^1.32.12",

"sass-loader": "^10.5.2",

---

一、全局变量

a.scss内定义（记得全局引入，html，main，vue.config任意一种）

$global_color: #333;

b.vue内使用

color：$global_color

二、循环遍历加载图片

$list: sys-setting, dept;

@each $item in $list {

    .icon-#{$item} {

          display: inline-block;

          width: 100%;

          height: 80px;

          color: #666666;

          background-image: url(~@/assets/menu/icon-#{$item}.png); 

    }

}

三、@mixin混入（变量）

@mixin mybox-base($font-color, $bg-color) {

        width: 60px;

        height: 26px;

        color: $font-color;

        background-color: $bg-color;

}

.mybox {

        @include mybox-base(#1a1a1a, #e4e4e4);

}