【问题标题】:for loop not working in less css mixinfor循环在较少的css mixin中不起作用
【发布时间】:2016-06-21 16:29:58
【问题描述】:

我注意到,我认为按预期工作的 Less 实际上并没有生成我需要的所有样式 - 我的 for 循环不起作用。

问题较少的是:

.for(@list, @code) {
    & {
        .loop(@i:1) when (@i =< length(@list)) {
            @value: extract(@list, @i);

            @code();

            .loop(@i + 1);
        }

        .loop();
    }
}

.role-variants(@variants, @props){
    .for(@variants, {
      .security_class_@{value} {
        @props();
      }
    });
}

@admin-roles: admin, admin_manager, admin_user, admin_manager_user;

html{
    body{
        &.admin{
            .role-variants(@admin-roles, {display: block;});
        }
    }
}

http://less2css.org/ 上编译正确,生成我期望的类。

当我在本地编译时,我只得到以下类:

html body.admin .security_class_admin {
    display: block
}

我的 for 循环在本地无法运行,尽管它似乎是有效的并且使用 less 编译器工作。关于如何修改它以在本地工作的任何想法,或者我可能需要将我的环境更新到特定版本,尽管它似乎是最新的。

再次感谢您的帮助。

杰米

【问题讨论】:

  • 我看到人们正在寻找,但没有任何建议即将到来 - 如果有任何信息丢失或更多细节我可以添加以帮助更好地描绘我遇到的问题请询问 - 我会尽我所能提供尽可能多的细节。如果您处于这种情况下,您将如何隔离问题?我可能错过的任何步骤或检查?再次感谢;)
  • 请编辑您的问题并尝试将您的代码减少到您的错误易于重现的程度:How to create a Minimal, Complete, and Verifiable example ?
  • 感谢 Ivan 的反馈,感谢 Ali Torabi 的无益和讽刺。我已经用我的应用程序代码的精简提取更新了这个问题,我希望这将简化和澄清我遇到的问题。
  • 你用什么编译?代码编辑器、grunt、gulp、cli……你有什么版本的less?
  • 感谢 blonfu - 我正在使用 Grunt 编译 - 从我的 package.json:"grunt-contrib-less": "^1.3.0",我认为这可能是版本问题,但是通过更多的挖掘和测试,我发现我的循环根本没有正确循环 - 没有办法(我知道)在较少的文件上设置断点我只能看到格式错误的结果,但一切似乎都在工作现在预计 - 如果您有兴趣看到完整的类生成自动化,我可以发布我的完整代码 - 最后它非常复杂。

标签: css npm gruntjs less


【解决方案1】:

我的循环格式错误 - 这个循环现在按预期工作:

.for(@list, @code) {
    & {
        .loop(@i) when (@i > 0) {
            @value: extract(@list, @i);
            @code();
            .loop((@i - 1));
        }
        .loop(length(@list));
    }
}

【讨论】:

猜你喜欢
  • 2018-06-12
  • 2017-05-05
  • 2018-08-21
  • 2015-10-18
  • 1970-01-01
  • 2017-04-13
  • 2013-12-31
  • 2017-01-14
  • 2011-07-21
相关资源
最近更新 更多