更少的延迟加载问题 - 使用 mixin 和变量在同一 css 文件中为 ltr 和 rtl 语言设置样式

Question

我在网页上收到的包含 LTR 和 RTL 内容的 mixins 和样式的文件较少。该网页一次只显示一种类型的内容，LTR 或 RTL。虽然我可以为 LTR 和 RTL 样式设置单独的 css 并控制加载哪个文件，但我希望它们都在同一个 css 文件中。

mixin 由 @lang 变量控制，如下所示：

// file: mixins.less
.myMixin() when (@lang = ltr){
    float: left;
}

.myMixin() when (@lang = rtl){
    float: right;
}

mixin 正在 styles.less 文件中使用：

// file : styles.less
.myDiv{
    .myMixin();
}

我想通过两次导入 styles.less 文件但每次导入的 @lang 变量值不同，以相同的 css 输出 ltr 和 rtl 样式：

@import "mixin.less";

@lang: ltr;
@import (multiple) "styles.less";

@lang: rtl;
html{
    [dir=rtl] & {
        @import (multiple) "styles.less";
    }   
}

但是由于 LESS 对变量的延迟加载，这显然是行不通的。

css 文件中的预期输出：

.myDiv {
  float:left;
}
[dir=rtl] html .myDiv {
  float:right;
}

css 文件中的实际输出：

.myDiv {
  float:right;
}
[dir=rtl] html .myDiv {
  float:right;
}

我无权修改 mixins.less 文件或 styles.less 文件。 我将如何实现 ltr 和 rtl 样式在同一个 css 文件中？

提前致谢。

Link 对于 @seven-phases-max ：Example

Answer 1

根据七相最大值 .

我自己发布答案

以前 @lang 变量的范围在整个过程中都是相同的，当延迟加载开始时，@lang 被分配给它的最新值。我们需要在更改 @lang 的值时隔离范围，方法是添加一个未命名的命名空间，然后在同一范围内导入混合和样式，这将产生所需的结果。

下面是代码片段：

@lang: ltr;
@import "mixin.less"; // value of @lang is ltr
@import "styles.less"; // creates ltr styles

& {
    @lang: rtl;
    html{
        [dir=rtl] & {
            @import (multiple) "mixin.less"; // value of @lang is rtl
            @import (multiple) "styles.less"; // creates rtl styles
        }   
    }
}

输出符合预期：

.myDiv {
  float: left;
}
[dir=rtl] html .myDiv {
  float: right;
}

更少的延迟加载问题 - 使用 mixin 和变量在同一 css 文件中为 ltr 和 rtl 语言设置样式

LESS lazy load issue - styles for ltr and rtl languages in same css file using mixins and variables

css

lazy-loading

less