Тело доступа lang в SCSS в Angular 6 - PullRequest
Новая
       5

Тело доступа lang в SCSS в Angular 6

0 голосов
/ 29 августа 2018

Я использую ядро ​​@ 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

Как мне этого добиться?

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Если вы хотите сделать это в файле компонента SCSS, вам нужно сделать что-то вроде следующего кода: 

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

Если вы делаете это в своем файле styles.scss, вы можете достичь своей цели с помощью следующего кода: 

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

[lang="fr"] {
    // Your code
}
0 голосов
/ 29 августа 2018

Правильный ответ rsangin.

Если вы хотите выбрать все языки, кроме en, ​​вы можете просто использовать :not([lang="en"])

0 голосов
/ 29 августа 2018

Поскольку это 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 не найден. Вы можете найти больше селекторов атрибутов здесь: https://www.w3schools.com/css/css_attribute_selectors.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...