使用 LESS :extend() 和 :lang()答案

【问题标题】：Using LESS :extend() with :lang()使用 LESS :extend() 和 :lang()
【发布时间】：2016-01-30 06:32:03
【问题描述】：

我正在开发一个多语言网站 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);
}

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

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

【问题讨论】：

标签： less less-mixins

【解决方案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.

【讨论】：