使用LESS：extend（）：lang（）

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

注：原因：郎（）的混入內部設置是有禁用它們對需求的未來能力

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標題中。

I.e. （簡化並且未優化的例子開始）：

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