Idea: Assembler Functions

Okok, here’s the idea: Functions, these would work similarly to built in CSS functions, like calc(), var() and more. So here’s how this work work:

:root {
	--dark--function: "@${0}-{1=700}";
}

Now it would be used like this:

<!-- New keyword, just like we use "@" for variables and "^" for mixins, we can use "$" for functions -->
<div x-style="color: $dark(blue, 800);"></div>

Sound cool yet? (not really)

So here’s how it gets super cool:

AssemblerCSS.registerFunction("darken", (settings, ...args) => {
  //Same callback format as registerMixin
  var color = args[0];
  var amount = args[1];
  if (!(color && amount)) return args.join(",");//Return the original args and stuff
  if (!+amount) return color;//Return the color if amount isn't a number
  if (!/^#[0-9A-F]{6}$/i.test(color)) {
    //Since this is just a code sample for an idea I'm not gonna add color conversion and stuff.
    return color;
  }
  return `#${darkenHex(color.replace(/^#/, "").toUpperCase(), amount)}`;
  function darkenHex(col, amt) {
    amt = 0 - amt;//We're darkening, not lightning
    var num = parseInt(col, 16);
    var r = (num >> 16) + amt;
    var b = ((num >> 8) & 0x00ff) + amt;
    var g = (num & 0x0000ff) + amt;
    var newColor = g | (b << 8) | (r << 16);
    return newColor.toString(16);
  }
});

Nowwww, look what we could do (!!!)

<div x-style="color: darken(#345beb, 20)"></div>

which turns into…

<div x-style="color: #2047d7"></div>

There are endless possibilities with this! Please consider adding it! 😃

[Awilum]

For me, Functions looks more intuitive and flexible than Mixins.

[Explosion-Scratch]

Looks similar to Mixins, except, we don’t need to use this special char ^ in x-style for functions

And mixins can’t be nested, and if I came across this code I wouldn’t know what’s going on:

^darken: #ff00ff, 30, background-color;

but this on the other hand:

background-color: $darken(#ff00ff, 30);

makes a lot more sense.

Basically it’s an issue of syntax, not necessarily performance, as the performance could be solved by just passing raw parameters to the assembler.