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解决方案，而不是嵌套类，但这并不好 - 我想要实现一个干净的＆amp;可读的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);
}

lang和其他方法之间的显着区别在于它识别元素内容的语言，即使语言是在相关元素之外声明的。

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

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

1 个答案: