html - 如何在 Sass 中使用 lang() 选择器？

Question

我有一个 div 来存储文本摘录，并且使用 :before 选择器应用标题。

.myDiv{
  &:before {
    content = "My Title";
  }
}

我以英语和西类牙语版本存储这些摘录 - 两种语言都位于属于同一类的 div 中，并且使用 lang 属性来区分它们。

<div class="myDiv" lang="en">
    <p>Hello, world!</p>
</div>

<div class="myDiv" lang="es">
    <p>¡Hola Mundo!</p>
</div>

如何根据使用 SASS 的语言应用不同的标题？我尝试过以下方法:

@mixin divTitles {
  &:lang(en) and &:before{
    content: "My Title";
  }
  
  &:lang(es) and &:before{
    content: "Mi título";
  }
}

但是当我尝试添加语言运算符时，它失败了，尽管 SASS 中允许使用“and ”运算符，并且 CSS 中可以使用“:lang() ”伪选择器。

编辑:我将其更改为

@mixin divTitles {
  &:lang(en) {
    &:before{
      content: "My Title";
    }
  }
      
  &:lang(es) { 
    &:before{
      content: "Mi título";
    }
  }
}

并且它有效。有没有更优雅的解决方案？

Answer 1

对于 mixin 来说，这是一个非常奇怪的用例，但要回答你的问题:

@mixin divTitles {
    &:lang(en):before {
        content: "My Title";
    }

    &:lang(es):before {
        content: "Mi título";
    }
}

我建议将这个特定的东西作为一个 CSS 选择器。

.myDiv {
    &:lang(en):before {
        content: "My Title";
    }

    &:lang(es):before {
        content: "Mi título";
    }
}