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

我有一个div来存储文本摘录，并使用before选择器应用标题。如何在Sass中使用lang（）选择器？

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

我存储在这两个英语和西班牙语版本，这些摘录 - 两种语言都装在属于同一类的div，他们使用的是郎属性区分。

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

但是当我尝试添加的语言操作，即使“and”允许操作员在SASS它倒了，而“:lang()”伪选择器在CSS中工作。

编辑：我改成了

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

和它的作品。有没有更优雅的解决方案？

来源

2017-04-10 Jake

我错了，或者“和”运算符只是用于检查条件，所以如果X和Y是真的，那么....不要连接 – DaniP

这是一个非常奇怪的用例为一个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"; 
    } 
}

来源

2017-04-10 16:48:20

现在我不能测试，但我有两个建议：

删除第二个 “&”：&：郎（en）和：前
使用[郎| = en]而不是lang（en）

来源

2017-04-10 16:50:09 Xerus

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

回答

相关问题