Home Append an argument to a variable in a LESS mixin
Reply: 1

Append an argument to a variable in a LESS mixin

MindPhuq
1#
MindPhuq Published in 2018-01-11 17:35:44Z

Here's the code I have:

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;


.some-color(@i) {
  + .some-class-name {
    background-color: @color-level-@i;
  }
}

.another-class-name {
  .some-color(3);
}

What is trying to accomplish is getting this output when using the mixin:

.another-class-name + .some-class-name {
  background-color: #E91E63;
}

Unfortunately it does not work. What I am getting as an output is:

.another-class-name + .some-class-name {
  background-color:  3;
}

I've tried escaping, but it does not help as well. Does someone have an idea how to make it work?

MindPhuq
2#
MindPhuq Reply to 2018-01-12 12:00:07Z

There are two ways to do this. The first one is:

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;

.some-color(@i) {
  + .some-class-name {
    background-color: ~"@{color-level-@{i}}";
  }
}

.another-class-name {
  .some-color(3);
}

And the second is:

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;

.some-color(@i) {
  + .some-class-name {
    @color-name: "color-level-@{i}";
    background-color: @@color-name;
  }
}

.another-class-name {
  .some-color(3);
}

Both of these return:

.another-class-name + .some-class-name {
  background-color: #E91E63;
}

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.304459 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO