Sass Function Values

How it works

A function value can be passed to another helper rather than hard-coding one calculation. sass:meta provides get-function and call for this purpose. The example intentionally chooses an application-owned function by a fixed name. This can support a small configurable transformation pipeline, but direct calls remain clearer when there is only one known operation and no need to pass it elsewhere.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass function-values.scss function-values.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

function-values.scss

Download function-values.scss — save at the shown relative path.

@use "sass:meta";
@function double-space($value) {
  @return $value * 2;
}
$transform: meta.get-function("double-space");
.screening-card {
  padding: meta.call($transform, 8px);
}

Expected CSS

.screening-card {
  padding: 16px;
}

get-function retrieves a callable value and call supplies its argument. The returned length enters padding exactly as it would in a direct invocation. This mechanism runs in Sass, not in the browser, and cannot call arbitrary JavaScript functions.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.