Using LESS :extend() with :lang()

Question

Am working on a multi language website css where every UI component has different font paramaters based on different language. The use of mixin to create the output is working, but generating duplicate code. Am looking for a better solution which will have :lang() support along with inheritance.

LESS

.lang(@lang, @content) {
    &:lang(@{lang}){
        @content();
    };
}

.font-size(@sizeValue) {
    @remValue: @sizeValue;
    @pxValue: (@sizeValue * 10);
    font-size: ~"@{pxValue}px";
    font-size: ~"@{remValue}rem";
}

.page-title(@color) {
    .cjk-font-size() {
        .font-size(3.6);
        line-height: 1.3;
        font-weight: 300;
    }

    color: @color;
    .font-size(5.4);
    line-height: 1;

    .lang(zh-CN,{
        .cjk-font-size;
    });

    .lang(zh-TW,{
        .cjk-font-size;
    });

    .lang(ko,{
        .cjk-font-size;
    });

    .lang(ja,{
        .cjk-font-size;
    });
}

.comp {
  .page-title(red);
}

NOTE : reason for :lang() to be set inside a mixin is to have the future capability to disable them on demand

CSS OUTPUT

.comp {
  color: red;
  font-size: 54px;
  font-size: 5.4rem;
  line-height: 1;
}
.comp:lang(zh-CN) {
  color: red;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.3;
  font-weight: 300;
}
.comp:lang(zh-TW) {
  color: green;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.3;
  font-weight: 300;
}
.comp:lang(ko) {
  color: blue;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.3;
  font-weight: 300;
}
.comp:lang(ja) {
  color: yellow;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.3;
  font-weight: 300;
}

EXPECTED OUTPUT

.comp {
  color: red;
  font-size: 54px;
  font-size: 5.4rem;
  line-height: 1;
}
.comp:lang(zh-CN),.comp:lang(zh-TW),.comp:lang(ko),.comp:lang(ja) {
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.3;
  font-weight: 300;
}
.comp:lang(zh-CN) {
    color: red;
}
.comp:lang(zh-TW) {
  color: green;  
}
.comp:lang(ko) {
  color: blue;
}
.comp:lang(ja) {
  color: yellow;
}

seven-phases-max · Answer 1 · 2016-01-29T22:32:03.367

The answer ("use extend") is already in your Q title.

I.e. (simplified and not optimized example to start with):

.comp {
    .font-size(5.4);
    line-height: 1;

    .cjk-font-size__ {
        .font-size(3.6);
        line-height: 1.3;
        font-weight: 300;
    }

    .lang(zh-CN, {color: red});
    .lang(zh-TW, {color: green});
    .lang(   ko, {color: blue});
    .lang(   ja, {color: yellow});

    .lang(@lang, @style) {
        &:lang(@{lang}) {
            &:extend(.comp .cjk-font-size__);
            @style();
        }
    }
}

.font-size(@size) {
    font-size: (10px * @size);
    font-size: (1rem * @size);
}

Demo.

Using LESS :extend() with :lang()

1 Answers1