Less 函数设置多语言背景图

在开发H5多语言活动时，我们常常会遇到一张背景图需要切换多种语言。 直接写在css如下：

            &.untying {
              &.English {
                background: url("../assets/img/English/untying_btn.png")
                  no-repeat center;
                background-size: auto 100%;
              }
              &.Russian {
                background: url("../assets/img/Russian/untying_btn.png") no-repeat
                  center;
                background-size:  auto 100%;
              }
              &.Turkish {
                background: url("../assets/img/Turkish/untying_btn.png") no-repeat
                  center;
                background-size:  auto 100%;
              }
            }

如果像这样语言很多，每一张图都要设置很多种语言，这样在H5活动的页面单是设置背景图也是一个很大的工作量。于是需要改变。

法一：每一种语言都建立一个文件夹，放对应的语言图片。在需要设置多种语言的图片添加语言标识， 目标是自动生成上面的背景图css。

<div :class="['title', lang]" />

新建mixin.less

.loop-lang-bg(@url) {
//语言列表设置
  @langs: English, Russian, Turkish;
  .loop-lang (@langs: @langs, @i:1) when (@i <= length(@langs)) {
  //提取当前的语言
    @item: extract(@langs, @i);
    //替换传入的lang变量
    @replace-url: replace(@url, '{lang}', @item);
    &.@{item} {
        background-image: url('~@@{replace-url}');
       background-size: auto 100%;
    }
    //遍历langs数组,保证每种语言都被设置了
    .loop-lang(@langs, (@i + 1));
  }
  .loop-lang()
}

使用：

@import url('~@/styles/mixin.less');
    .untying {
          .loop-lang-bg('/assets/banner/{lang}/title.png');
            }

以上编译的代码为：

      .untying {
              &.English {
                background: url("../assets/img/English/untying_btn.png")
                  no-repeat center;
                background-size: auto 100%;
              }
              &.Russian {
                background: url("../assets/img/Russian/untying_btn.png") no-repeat
                  center;
                background-size:  auto 100%;
              }
              &.Turkish {
                background: url("../assets/img/Turkish/untying_btn.png") no-repeat
                  center;
                background-size:  auto 100%;
              }
            }