I'm searching for an answer about this:
I got a mixins with a loop inside:
@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);
}
}
I've searched everywhere on the web but i cannot help me and find how i could: redifine my @language-array-length in my .landing-specific arguments to loop only on that new update array.
I'm not sure that i'm very clear, sorry for my english and thanks to whom can help me in that laborious task.
This is the css i'm trying to achieve:
@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);
}
}
For each pages I have a mixins ex: .landing-specific(organisation, #487e19, #a0d474, 1, 1);
What i want is to generate the language specific styles only if the language is in an array.
It is relatively difficult to explain, sorry :/