F
F
fullj02016-01-24 14:09:52
css
fullj0, 2016-01-24 14:09:52

Is it possible to call mixins in LESS using a variable as part of the mixin name?

I have three mixins .arsenal-logo(@width), .real-logo(@width), .milan-logo(@width). In the future, there will be much more of them. I put the team names in a variable (of type "array") @team-name. And sorting through this "array" I try to call [email protected]{name}-logo(@width); But the compiler (gulp-less) throws an error. Isn't it possible to call mixins in LESS using a variable as part of the mixin name? Or is this problem solvable?

// ............................................................
// .for

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
  .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}

.generate-logo-styles(@width, @bg-color: silver) {
  width: 30px;
  height: 30px;
  position: relative;
  background-color: @bg-color;

  @team-names: real, milan, arsenal;

  .for(@team-names); .-each(@name) {
    &[email protected]{name}-logo {
      margin-left: @width;
      [email protected]{name}-logo(@width); //ВОТ ЗДЕСЬ КОМПИЛЯТОР ВЫДАЕТ ОШИБКУ
    }
  }
}
.test {
.generate-logo-styles(200px);
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alex, 2016-01-30
@fullj0

No. There is a heated discussion in the LESS repository about this issue. Try to solve the problem with other tools, such as PostCSS.
But, to be honest, I don’t understand why generate a mixin for each team, why can’t we make a mixin that, for example, expands the team name into a picture, because logos, as I understand it, will differ only in pictures?

.article-about-milan-logo {
    .team-logo(30px, "milan");
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question