css - 如何使用 sass 自动化多语言背景图像

Question

这是所需的 CSS:

    body[lang=en] .my-div {background-image:url('my-image-en.png')}
    body[lang=de] .my-div {background-image:url('my-image-de.png')}
    body[lang=fr] .my-div {background-image:url('my-image-fr.png')}
    ...

我想使用这样的 mixin 来自动化这个过程:

body {
  .my-div {
     @include i18n-background-image('my-image')
  }
}

现在，我已经接近使用这个 mixin 的解决方案了:

$languages = ["en", "de", "fr", ...];    
@mixin i18n-background-image($name) {   
      @each $lang in $languages {
        background-image: url(#{$name}-#{$lang}.png)
      }
    }

但我的问题是我无法添加body[lang=#{$lang}]，因为它已经嵌套在其中。我可以找到一个 hacky 解决方案，而不是嵌套类，但这不太好 - 我想实现一个干净且可读的 mixin。有办法解决吗？也许在所有嵌套类上循环迭代？

Answer 1

只要有可能，你真的想尝试超出资格。这应该可以完成工作:

$languages: en, de, fr;    
@mixin i18n-background-image($name) {   
  @each $lang in $languages {
    &:lang(#{$lang}) {
      background-image: url(#{$name}-#{$lang}.png);
    }
  }
}

.my-div {
   @include i18n-background-image('my-image');
}

输出:

.my-div:lang(en) {
  background-image: url(my-image-en.png);
}
.my-div:lang(de) {
  background-image: url(my-image-de.png);
}
.my-div:lang(fr) {
  background-image: url(my-image-fr.png);
}

A significant difference between :lang and the other methods is that it recognizes the language of the content of an element even if the language is declared outside the element in question.

http://www.w3.org/International/questions/qa-css-lang