如何在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（）選擇器？

回答

相關問題