代码之家 › 专栏 › 技术社区 › KnD

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

lazy-loading less css

KnD · 技术社区 · 6 年前

我已经获得了较少的文件包含混合和风格的LTR以及RTL的内容在网页上。该网页一次只显示一种类型的内容,LTR或RTL。虽然我可以为LTR和RTL样式使用单独的css,并控制加载哪个文件,但我希望它们都位于同一个css文件中。

混合由@lang变量控制,如下所示:

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

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

这些混合物正在一种风格中使用。更少的文件:

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

我想通过导入样式在同一个css中输出ltr和rtl样式。减少文件两次,但每次导入的@lang变量值不同:

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

我没有修改混音的自由。更少的文件或样式。更少的文件。 我如何在同一个css文件中实现ltr和rtl样式?

提前谢谢。

最大七相连接: Example

1 回复 | 直到 6 年前

KnD 6 年前

根据max的七个阶段自己发布答案 comments .

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

下面是代码段:

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

推荐文章

Christian Luneborg · 星级评定不起作用

6 年前

jinfy · Less mixin不适用于带有逗号的参数

6 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

6 年前

Ruur · Sass通过引用分配变量

6 年前

epeleg · 将较少的混合器转换为SCS

6 年前

Michael · Angular CLI无源映射用于LESS/SASS

6 年前

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

6 年前

Andy · 如何向现有的Angular 5项目添加更少的内容

6 年前

Øystein Seel · 从grunt迁移后,在网页包中失败的模块更少

7 年前

Patrickvanl · ::前后内容始终在内容上方和下方?

7 年前