时间戳

首页 > 解决方案 > 在 Angular 6 中访问 SCSS 中的正文语言

css - 在 Angular 6 中访问 SCSS 中的正文语言

问题描述

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

<body lang="en">

或者

<body lang="fr">

通过 if else 条件。

Inside my component sass i want to do something like this

@if( bodylang = en)

/these rules

else 

// these rules

我怎样才能做到这一点？

标签： csssass

解决方案

由于它是 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 标签本身更具体。这意味着如果没有找到匹配的语言代码标签，它将应用常规的正文 CSS。您可以在此处找到更多属性选择器：https ://www.w3schools.com/css/css_attribute_selectors.asp

推荐阅读