Access body lang in SCSS in Angular 6

Question

I am using @ngx/translate core for lang change. I want to define sass on the basic of

<body lang="en">

or

<body lang="fr">

by if else condition.

Inside my component sass i want to do something like this

@if( bodylang = en)

/these rules

else 

// these rules

How can i achieve this?

https://angular-with-fun.blogspot.com/2018/08/localizing-professional-web.html. This is another way of handling localization — Malindu Sandaruwan, Aug 29 '18 at 11:26
thanks, i am doing almost same but i need to change css in case of arabic... — Coder, Aug 29 '18 at 11:31
If any of the solutions work for you, don't forget to mark the respective answer as 'correct', using the tick under the upvote/downvote score of the answers itself. — Lesleyvdp, Aug 30 '18 at 08:11

Lesleyvdp · Answer 1 · 2018-08-29T11:34:28.140

2

As it is SCSS you are able to use CSS attribute selectors for this, for example:

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

Which in your case would be:

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

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

You can also nest them like such:

body {
    background-color: orange;

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

This selector is more specific than just referring to the body tag itself. This means that it will apply the regular body CSS if none of the matching langcode tags are found. You can find more attribute selectors here: https://www.w3schools.com/css/css_attribute_selectors.asp

edited Aug 29 '18 at 11:34

answered Aug 29 '18 at 11:25

Lesleyvdp

313
2
14

can you do this for conditions in scss? – Coder Aug 29 '18 at 11:27
@Coder You can use CSS expressions in SCSS as well yes! – Lesleyvdp Aug 29 '18 at 11:32
you did not read properly, i need to create a if else in SCSS – Coder Aug 29 '18 at 11:34
@Coder It works like the if-else statement you are building – Lesleyvdp Aug 29 '18 at 11:35
how to access it by variable in angular component?? – Coder Aug 29 '18 at 11:55
@Coder As long as @ngx/translate adds the lang attributes to your body tags, you can simply put the code I provided you in your sass file and it will render accordingly – Lesleyvdp Aug 29 '18 at 11:56

score 1 · Accepted Answer · answered Aug 29 '18 at 12:15

If you want to do it in your component SCSS file you have to do something like bellow code:

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

If you are doing it in your styles.scss file you can achieve your goal with following code:

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

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

score 0 · Answer 3 · answered Aug 29 '18 at 13:37

0

rsangin's answer is the correct one.

If you want to select every language that is not en, you can just use :not([lang="en"])

answered Aug 29 '18 at 13:37

Andifined

479
6
19

Access body lang in SCSS in Angular 6

3 Answers3

Linked