0

I am trying to create a mixin that takes several parameters and based on those returns a value. However, I tried testing my less file on http://fiddlesalad.com/less/, but nothing happens.

@volume-color: white;
.volume-color(@media, @volume) {
    & when (@media = "novel") {
       & when (@volume > 2) {
           @volume-color: green;
       }
       & when (@volume = 1) {
            @volume-color: red;
       }
    }
}

.test {
    .volume-color("novel", 1);
     color: @volume-color; 
}

What am I doing wrong?

ghost013
  • 97
  • 1
  • 10
  • See https://stackoverflow.com/questions/25287904, comments in https://stackoverflow.com/questions/48324036 and https://stackoverflow.com/questions/23738798 for a more complex example. – seven-phases-max Feb 13 '18 at 10:27
  • Aside of above, to create and use real *functons* use the dedicated pugin (you'll find in the list of available pugins in the docs). – seven-phases-max Feb 13 '18 at 10:29
  • [Example](https://gist.github.com/seven-phases-max/d7aae1f9e39c6e5f8c87dd499a56c881). – seven-phases-max Feb 13 '18 at 11:09
  • Hmm, so essentially I would have to list out every possible combination to get the result I want. Doesn't seem very scaleable in the event I want to add more cases or parameters in the future. Edit: Fixed grammer – ghost013 Feb 13 '18 at 13:00
  • *I would have have to list out every possible combination* - No, see the code once mode, it's no more combinations (just +1) than the number of `when`s in your attempt. As for scalabiity - I'd say that the probem in the appoach itself, it's dificult to suggest something w/o knowing your use-case in details (what's this "novel", where it comes from etc.), but in general those staking `if`s look suspicitious within a declarative code (for more detais see https://github.com/less/less.js/issues/1894). – seven-phases-max Feb 13 '18 at 13:08
  • And, sure, you [still can use](https://gist.github.com/seven-phases-max/d7aae1f9e39c6e5f8c87dd499a56c881#file-exampe-2-less) (`@voume > 2`) conditions there, in my 1st example I did not because there's no real need for that (-> shorter code). – seven-phases-max Feb 13 '18 at 13:53
  • The "novel" was just an example, but I essentially wanted a way to map specific colors based on a combination of classes. I am going to go ahead and accept your answer but it seems Less quite fit what I need. I've been playing with sass and I think I was able to a result fitting more closely to my needs using the maps and functions. – ghost013 Feb 15 '18 at 05:37
  • *a way to map specific colors based on a combination of classes* yet again it's difficult to suggest something w/o seeing the big picture of your use-case, but in most cases the opposite approach (making the whole classes based on high-level variable/color values) works best (w/o any conditionals). Customization based on hardcoding specific values inside a low leve mixin is usually anti-generic. See for example various "theming" QAs here at the SO - we do not hide and spread endless `if (theme = one) do that;` all over the code. – seven-phases-max Feb 15 '18 at 08:17
  • As for Sass vs. Less - if you can't get into cascade-and-override concept of style sheet languges (like СSS and Less) it's absoutely fine for you to prefer a scripting text generator lang (like PHP or Sass). It's nothing wrong with that (different approaches -> different instruments). – seven-phases-max Feb 15 '18 at 08:27

1 Answers1

0

Try this:

.volume-color(@media, @volume) {
  & when (@media = "novel") {
  & when (@volume > 2) {
    color: green;
  }
  & when (@volume = 1) {
    color: red;
  }
}
}
.test {
  .volume-color("novel", 1);
}

.test2 {
  .volume-color("novel", 3);
}

Compiled to:

.test {
  color: red;
}
.test2 {
  color: green;
}
King Rui
  • 321
  • 2
  • 7
  • Not quite what I wanted. The purpose is I want to be able to reuse the actual color value for any property, say I want to set it to the background-color or border color. – ghost013 Feb 13 '18 at 10:13