Question

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

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

注意：在mixin中设置lang（）的原因是将来有能力按需禁用它们

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

预期输出

.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

使用LESS：extend（）with：lang（）

1 个答案: