0

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 :/

Jean-Yves Le Cabellec
  • 1
  • 1
  • Sorry, it is not really clear what you are trying to do. Can you show us your expected CSS output? Maybe that way we will be able to correlate. – Harry Feb 17 '16 at 13:59
  • Hello, I added some css like you asked. – Jean-Yves Le Cabellec Feb 17 '16 at 14:12
  • *language specific styles only if the language is in an array* - You mean you want to send an array to the mixin (say "en", "es", "xy") and generate language specific styles only for "en", "es" because they are in your global array and ignore the "xy"? – Harry Feb 17 '16 at 14:15
  • Hmm, I guess I can understand the question perfectly, but what the op tried so far? (we should not write code for him, shall we?) - [Parametric Mixins](http://lesscss.org/features/#mixins-parametric-feature) has enough info to start with. @Jean Have you tried to understand what the mixin does? If you did not, I'm afraid we can't help because you're really just asking us to write the code for you and it's discouraged here at SO. – seven-phases-max Feb 17 '16 at 14:18
  • Or in other words, start with [the basic example](http://stackoverflow.com/questions/23249214) and try to adopt it to your particular needs (then we could help if you stall with a particular problem). – seven-phases-max Feb 17 '16 at 14:31
  • @Harry: exactly, I manage to do it on existing array, but I cannot achieve doing it by passing them in a new updated array. – Jean-Yves Le Cabellec Feb 17 '16 at 14:32
  • @seven: I'm juste trying to find some help. And I've pinned less.js documentation on my browser, so... – Jean-Yves Le Cabellec Feb 17 '16 at 14:32
  • @seven-phases-max : thanks for your links, I've find a solution by doing a new mixin (like the translate one from your link) and I called it where it was needed. Not the better optimized solution, but it works. – Jean-Yves Le Cabellec Feb 17 '16 at 16:14

0 Answers0