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”运算符，并且“:lang()”伪选择器在CSS中工作，它也会失败。

修改：我将其更改为

@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";
    }
}

Answer 2

我现在无法测试，但我有两个建议：

删除第二个＆＃34;＆amp;＆＃34;：＆amp;：lang（en）和：before
使用[lang | = en]代替lang（en）

如何在Sass中使用lang（）选择器？

2 个答案: