使用LESS :extend() with :lang()

Question

我在一个多语言的网站css工作，其中每个UI组件都有不同的字体参数基于不同的语言。使用mixin创建输出是可行的，但会生成重复的代码。我正在寻找一个更好的解决方案，它将具有:lang()支持以及继承。

较少

.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);
}

注意:将lang()设置在mixin中的原因是为了将来能够按需禁用它们

CSS输出

.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;
}

预期输出

.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;
}

Answer 1

答案(“使用extend")已经在你的Q标题中了。

即(简化且未优化的示例开始)：

.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。