CODEWITHSUNDEEP
javascriptcssless
NoAnswer
NoAnswer

Reputation: 61

I want to change the value of width according to HTML lang attribute in less or css

I want to change .edit width value according to HTML lang attribute in less or CSS

I want to do like this in less 

.edit {
    &:lang(en) {
        @main-properties-width: 200px;
    }

    &:lang(de) {
        @main-properties-width: 295px;
    }

    width: @main-properties-width + 25px;
}

but this does not work, variable @main-properties-width is

undefined !!

another way, I try to do like this

.edit {
    @lang: ? // ( i want to get html lang attribute value )

    & when (@lang = 'en') {
        @main-properties-width: 200px;
    }

    & when (@lang = 'de') {
        @main-properties-width: 295px;
    }

    width: @main-properties-width + 25px;
}

but the way, I don't know how to get HTML lang attribute value in CSS or less.

Is there a method to get lang in less or CSS?

How do I solve this problem?

Upvotes: 0

Views: 176

Answers (1)

VilleKoo
VilleKoo

Reputation: 2854

You could do it like this in css.

And just to be clear, in your case you would do it with lang attribute in html tag and then targeting it in css like this.

html[lang="fi"] .edit {}

DEMO:

[lang="fi"] p {
  background: blue;
  color: white
}

[lang="en-us"] p {
  background: red;
  color: white
}
<div lang="fi">
  <p>This is in finnish</p>
</div>

<div lang="en-us">
  <p>This is in english(us)</p>
</div>

<div>
  <p>This is generic</p>
</div>

Upvotes: 2

Related Questions