Custom Functions

[mgreter]

Hi all

Just wanted to give you a heads up that it should be possible to implement custom functions again. Custom functions are defined inside the dynamic scripting language and then registered with libsass. Then they can be called/referenced from scss/sass files, similar to internal functions.

Not sure if node-sass had that feature before the libsass refactoring. I fixed some bits on libsass so the Perl Bindings, which already had custom functions, would work again. So maybe you can profit off of that work, since both implementations are bindings to a dynamic scripting language. Maybe you also want to expose sass2scss to convert indented syntax to scss syntax.

There is a new custom precision feature, which unfortunately has a regression. I also added the offical spec-tests to the Perl-Binding test-suite, IMO it would be usefull to include them in node-sass too.

Kind regards
Marcel Greter

[ckihneman]

I'm at a crossroads right now on this, and being able to set the custom precision with node-sass, then into gulp-sass, is a make it or break it.

I want to get rid of compass if I can use libsass. But I still need Bootstrap grid to output at precision = 10, which is easy when using the ruby version (Sass::Script::Number.precision = 10).

I was able to add the precision in the prepareOptions function of node-sass, returning it with the other options. I tried poking around a bit further, but couldn't seem to get it working.

Any help is appreciated while I'm evaluating the toolset I'm going to use on the next big project.

Thanks,
Chris

[andrew]

@mgreter thanks for the recommendations, hopefully we can get those things implemented in the coming weeks 👍

@ckihneman there is a pull request to add a precision option here: #339

[myoung8]

+1 for custom functions, would love to be able to port over things like font_url that Sprockets adds to the Ruby version of sass.

[akashivskyy]

Yeah, I'd really like to define custom functions (like base64 for data-uri encoding) straight in the gulp/grunt file. 👍

[iandoe]

👍 Guys, i would love to implement font-url, base64, etc.. :)

[mgreter]

Had some time at hand to check out the C/C++ bindings to node-sass. Just wanted to share my latest findings here: Not sure if I'll find the time to learn/implement it for node-sass, but it's IMO a pitty that the perl bindings implement that many more features than node-sass!

ctx->c_functions = (Sass_C_Function_Descriptor*) calloc(sizeof(struct Sass_C_Function_Descriptor), size + 2);
Local<Value> fns = options->Get(String::New("functions"));
if (fns->IsObject ()) {
  Local<Object> obj = fns->ToObject();
  Local<Array> props = obj->GetOwnPropertyNames();
  for (int i = 0, len = props->Length(); i < len; i++){
    Local<String> key = props->Get(i).As<String>();
    Local<Value> val = obj->Get(key);
  }
}

[am11]

I don't have any idea how this "sass expert mode feature" would look like, can anyone please explain:

• What is the expected behavior from node-sass usage POV?
• Example code which goes in .scss / .sass files and where / how would user define a custom function? (in a js file?)

PS evidentially, i'm naïve about custom functions 😵

[mgreter]

I would guess somewhat like this:

sass.render({
  functions: {
    data: 'A { padding: sum(1px,foobar()); }',
    'foobar()': function () { return _Sass_Value_; },
    'sum($a,$b)': function (a,b) { return a + b; }
  }
});

[thedaviddias]

👍 Hi Guys, I saw recently that someone add image-url variable, that for my side is what I was waiting since a long time. The ONLY thing miss me is a font-url variable (like it is used on Compass) to really implement node-sass in all our projects. I really hope to see this possibility soon. :-)

[am11]

Guys custom importers are implemented: #530. We can probably refactor (in order to DRY) the C++ code meant for importer to implement custom functions as well.

If I am able to grab some more time soon out of my crazy schedule, I will take a stab at it and try my best to push this to v2. Or if you guys want to take a lead on this, PRs are always most welcome! :)

//cc @txdv, @jhnns

[ben-eb]

+1

[chriseppstein]

Hi, this is a critical feature to the extensibility of Sass as users are accustomed to in ruby. I am planning to port a large portion of Compass to node and we need this capability. I have an engineer at my work (linkedin) who is willing to work on this, but he are not accustomed to libsass or node.js's internals so we could really use some pointers about how to get started implementing this feature. As I understand it there are three pieces that are needed here:

• libsass <--> js function binding (in C++)
• Javascript implementation of Sass value objects.
• execution environment and helper functions (exposed as methods and properties of this)

Since I wrote a lot of the similar API for ruby, I'd be happy to help define or review the javascript interfaces.

[xzyfer]

@mgreter is certainly the person to talk to in regards to the libsass side of things. We have some documentation on the libsass wiki for custom functions that should be of use https://github.com/sass/libsass/wiki/Custom-Functions-internal

[chriseppstein]

@xzyfer Ok, I think I get it. So the string passed to sass_make_function is a fully qualified sass function argument declaration supporting defaults, etc?

[xzyfer]

I'm not entire familiar with the API, but that sounds about right. You might be able to use https://github.com/sass/perl-libsass/blob/8fa1bb0b765bd6b0f1e8391171b09f31eed0c573/lib/CSS/Sass.xs and https://github.com/wellington/wellington as references for using the C API.

Also I'm sure @mgreter will happily help where needed in https://gitter.im/sass

[am11]

BTW, this is on 2.1 milestone 3.0 milestone.

[am11]

This is addressed by 07a9540 via #644.