使用mixin guard减少环路干扰阵列

时间:2016-02-17 13:56:21

标签: css arrays less less-mixins

我正在寻找关于此的答案:

我有一个带有循环的mixins:

@global-language-array: fr, de, es, en;
@language-array-length: length(@global-language-array);

        .landing-specific(  @landing-name,
                        @landing-color,
                        @landing-bg-color,
                        @landing-alt-start: 0,
                        @landing-alt-end: 0,
                        @landing-search-color: @landing-color,
                        @custom-heart: false,
                        @landing-multi-language: false) {

                & when (@landing-multi-language) {
                    .lang-loop (@language-array-length) when (@language-array-length > 0) {
                        @lang: extract(@global-language-array, @language-array-length); 
                                html[lang="@{lang}"] & {
                                    background-image: url(../img/bg/texture.png), url(~"../img/culture/@{lang}/view/landing-default/@{landing-name}/banner-lg.jpg");
                                }
                            .lang-loop (@language-array-length - 1);  
                        }
                    .lang-loop(@language-array-length);
                    }
    }

我在网上到处搜索但是我无法帮助我并找到我的能力: 在我的.landing特定参数中重新定义我的@ language-array-length,仅在新的更新数组上循环。

我不确定我是否非常清楚,对不起我的英语,并感谢谁能帮助我完成这项繁重的工作。

这是我想要实现的css:

@media (min-width: 1200px) {
  .organisation.alt-1 .banner-landing {
    background-image: url(../img/bg/texture.png), url(../img/view/landing-default/organisation/banner-alt-1-lg.jpg);
  }
  .organisation .banner-landing {
    background-image: url(../img/bg/texture.png), url(../img/view/landing-default/organisation/banner-lg.jpg);
  }
  html[lang="en"] .organisation .banner-landing {
    background-image: url(../img/bg/texture.png), url(../img/culture/en/view/landing-default/organisation/banner-lg.jpg);
  }
  html[lang="es"] .organisation .banner-landing {
    background-image: url(../img/bg/texture.png), url(../img/culture/es/view/landing-default/organisation/banner-lg.jpg);
  }
  html[lang="de"] .organisation .banner-landing {
    background-image: url(../img/bg/texture.png), url(../img/culture/de/view/landing-default/organisation/banner-lg.jpg);
  }
  html[lang="fr"] .organisation .banner-landing {
    background-image: url(../img/bg/texture.png), url(../img/culture/fr/view/landing-default/organisation/banner-lg.jpg);
  }
  .organisation .slide-fade {
    background-image: url(../img/bg/texture.png), url(../img/view/landing-default/organisation/banner-lg-fade.jpg);
  }
}

对于每个页面,我都有一个mixins 例如:.landing-specific(组织,#487e19,#a0d474,1,1);

我想要的是只有当语言在数组中时才生成特定于语言的样式。

相对难以解释,抱歉:/

0 个答案:

没有答案