Question

我正在使用@ ngx / translate核心进行语言更改。我想在的基础上定义sass

<body lang="en">

或

<body lang="fr">

根据其他条件。

Inside my component sass i want to do something like this

@if( bodylang = en)

/these rules

else 

// these rules

我该如何实现？

Answer 1

由于它是SCSS，因此您可以使用CSS属性选择器，例如：

a[target="_blank"] { 
    background-color: yellow;
}

您的情况是：

body[lang="en"] {
    // Your code
}

body[lang="fr"] {
    // Your code
}

您也可以像这样嵌套它们：

body {
    background-color: orange;

    &[lang="en"] {
       background-color: blue;
    }
}

此选择器比仅引用body标签本身更具体。这意味着如果找不到匹配的langcode标签，它将应用常规正文CSS。您可以在此处找到更多属性选择器：https://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

如果要在组件SCSS文件中执行此操作，则必须执行以下代码：

:host-context([lang="en"]){
    // Your code
}
:host-context([lang="fa"]){
    // Your code
}

如果您在styles.scss文件中执行此操作，则可以使用以下代码实现目标：

[lang="en"] {
    // Your code
}

[lang="fr"] {
    // Your code
}

Answer 3

rsangin的答案是正确的。

如果您想选择所有非en语言，则可以使用:not([lang="en"])