前言

开发H5活动的时候，通常我们都是使用less语法的，作为项目的预处理css。我们通常会使用到多语言的背景图，less的语法的多语言目前是已经有了：less多语言背景图。然后我在项目中使用的是scss语法，也需要使用到多语言背景图，就查看scss语法自己也实现了一个scss版本的多语言函数

用法

工具类全局scss函数会放在minxin.scss文件中：

// 背景图多语言
@mixin loop-lang-bg($preUrl, $posUrl) {
  $list: CN, TW; // 写入你需要的多语言的国家
  @each $i in $list {
    &.#{$i} {
      background-image: url("@#{$preUrl}/#{$i}/#{$posUrl}");
    }
  }
}

在需要的地方引入minxin.scss文件，然后按照以下的语法，传入引入的多语言背景图的路径，需要拆开成两段路径，前面是基础路径，后面是图片的文件夹名称

@import "../styles/mixin.scss";
.container {
  @include loop-lang-bg("/assets/banner", "logo.png");
}

多语言的文件夹类似于这样的