Use Mixin To Define Custom Vars

Question

Im trying to modify the lightness of a color, by a percentage of its distance to 100%, so that way I never go to 100% or over, resulting in white.

Honestly there may be a smarter what to do this, but my solution was to try something like this:

.zeno-lighten(@new-var-name;@color;@percentage:.5){
  @new-lightness: lightness(@color) + (100% - lightness(@color)) * @percentage;
  @{new-var-name}: hsl(hue(@color), saturation(@color), @new-lightness);
}

.cool-div{
  .zeno-lighten(@new-bg;indianred;.5);
}

It works if I make a static varname instead of creating based on an argument in the mixin.

Thanks!

As you said, I am not sure if this is the best way to do it. But the mixin should work fine if your `@new-bg` variable has a proper property name. Can you create a demo illustrating your problem (maybe in CodePen)? — Harry, Oct 25 '14 at 04:16
You can use `tint` function (e.g. `tint(@color, 50%)`, it is a shorthand for `mix(@color, white, @amount)` and it basically does what you need). As for the Q itself, no, you can't use "property interpolation" syntax to define new variables so it won't work this way. So you'll have to use some predefined name for this returning variable (and if you need multiple calls of this "function" in the same scope isolate each in `& {...}` (see for example [#538](https://github.com/less/less.js/issues/538#issuecomment-31346194))). — seven-phases-max, Oct 25 '14 at 11:14
possible duplicate of [Dynamically define a variable in LESS CSS](http://stackoverflow.com/questions/18039082/dynamically-define-a-variable-in-less-css) — Bass Jobsen, Oct 27 '14 at 00:50

Use Mixin To Define Custom Vars

0 Answers0