CODEWITHSUNDEEP
less
Spedwards
Spedwards

Reputation: 4492

LESS Variable Interpolation

I'm trying to simplify my CSS even further than I already have with LESS by using functions and variable interpolation. I was completely unaware of variable interpolation until I took a look at Hover.css' less files which is no surprise as to why I'm screwing up now.

I'm working on Reddit to make a flair system and I am encountering problems using variable interpolation.

I am currently using the below as a test:

.flair.flair-one { color: red; }
.flair.flair-two { color: green; }
.flair.flair-three { color: blue; }

.custom(@a; @b; @c) {
  &::before { .flair.flair-@{a}; }
  .flair.flair-@{b};
  &::after { .flair.flair-@{c}; }
}

.this-flair {
  .custom(one; two; three);
}

That's the basic structure of what I'm doing. While testing in online compilers, .this-flair isn't working.

Is someone able to tell me what I can do to resolve this? I'm looking through the LESS functions and it appears as though this is the correct way to do it.

Upvotes: 1

Views: 336

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

As mentioned in comments above you can't interpolate either mixin or function calls. In a quick glance, parametric mixins (with pattern matching) are what you actually need to use for such snippets:

.flair-flair(one)   {color: red}
.flair-flair(two)   {color: green}
.flair-flair(three) {color: blue}

.custom(@a, @b, @c) {
    .flair-flair(@b);
    &::before {.flair-flair(@a)}
    &::after  {.flair-flair(@c)}
}

.this-flair {
    .custom(one, two, three);
}

Upvotes: 1

Related Questions