Creating Custom Functions

[Deltachaos]

Hi,

It would be nice to define Custome Functions like:

  darkfadein(@color, @value) {
    return fadein(darken(@color, @value));
  }

  .foo {
    color: darkfadein(#333, 10%);
  }

should be compiled to:

  .foo {
    color: #1a1a1a;
  }

[souldreamer]

Maybe to differentiate it from a mix-in and keep closer to CSS syntax, it could be:

@darkfadein(@color, @value): fadein(darken(@color, @value));

Kind of like a variable that depends on parameters (which if you think on is kind of a function =)

[alpha123]

+1 to @souldreamer's syntax.

[Deltachaos]

But with @souldreamer's syntax it woul not be posible to write some
values into variables and use them again.

may useing this syntax:

  @darkfadein(@color, @value) {
     @foo: darken(@color, @value);
     return: fadein(@foo);
  }

may it would be possible in later versions to do something like this:

  @darkfadein(@color, @value) {
     @foo: darken(@color, @value);
     for(@i = 0; @i < 5; @i++): {
       @foo: darken(@foo, @i);
     };
     return: fadein(@foo);
  }

[tylertate]

I have a similar need to use a function of some sort to return a value. I think there are two possible solutions. One solution would be to extend the variable syntax as @Deltachaos outlined above, which is essentially:

@grid-width(@columns, @column-width) {
    @computedWidth = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

A second approach would be to use mixins. Since the compiler treats mixins as JavaScript functions anyway, adding a return feature to mixins would likely be a simple remedy. Here's what it would look like:

.grid-width(@columns, @column-width) {
    @computedWidth = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

SASS's "functional directives" provide a similar outcome, though I believe this mixin solution would be much more elegant.

Issues 508 and 609 are also related to this.

[Deltachaos]

I think the second syntax of @tylertate would be the best. I seams to be the easiest because as you said less already parses mixins as JavaScript.

Would somethink like this be possible with mixins?

.grid-width(@columns, @column-width) {
    @computedWidth = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      @computedWidth = darken(@computedWidth, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

[matthew-dean]

I'd rather see something like a defined LESS plugin syntax, and move programming-like logic to a JavaScript LESS plugin. These suggestions are inconsistent with current LESS syntax and design.

[lukeapage]

Agree.. theres a bug about that marked documentation since its relatively simple to add functions when you know how.

[jackmoore]

So what was the resolution?

[lukeapage]

We need to document it. see less/old-lesscss.org#54

and the linked issue from less.js shows how you can add a function to less in the browser

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

at the moment there is no way to plugin functions into the node version, but there should be

[jackmoore]

Thanks, I appreciate the response and the position to get JavaScript out of LESS's syntax.

However, not being forced to associate a mixin's return value with a specific property seems like such a clear use case. Anyone that uses a grid is going to want to do what @Deltachaos was trying to do. It would be great to be able to achieve this without dropping down to the level of creating a plugin.

[lukeapage]

Its a tricky thing - if you need to have loops or if's it needs to live in a plugin.

However if it is calling 3 less functions with specific values, I agree it makes sense to be able to extract that inside less in order to make the syntax DRY - it doesn't make sense to have to write a plugin to extract the fact that you want darken by 5% into one place.

[lukeapage]

I have re-opened but this might be duplicated somewhere else, we'll see.

at the moment variables from an mixins scope all get copied to the outer scope - which is kind of a way fo returning variables.. but its causing horrible problems and I want to remove it.