Sass JavaScript API

How it works

Build tools can invoke Dart Sass directly. The modern compile and compileAsync APIs accept a file and return CSS plus optional source-map information. The supporting script compiles this entry using the installed sass package. Install the pinned package in a new learning folder; this does not require changing Bhylu dependencies or PHP settings. The compiler does not make stylesheet input safe to accept from arbitrary web visitors.

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 javascript-api.scss javascript-api.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

javascript-api.scss

Download javascript-api.scss — save at the shown relative path.

@use "sass:math";
.screening-card {
  padding: math.div(48px, 3);
}

build.mjs

Download build.mjs — save at the shown relative path.

import * as sass from "sass";
import { fileURLToPath } from "node:url";
const result = await sass.compileAsync(
  fileURLToPath(new URL("./javascript-api.scss", import.meta.url)),
  { style: "expanded" },
);
console.log(result.css);

Expected CSS

.screening-card {
  padding: 16px;
}

Save the supporting build.mjs beside the entry and run npm install --save-dev --save-exact sass@1.107.0, then node build.mjs. The script prints the CSS and writes no output file. Its await demonstrates the asynchronous API rather than the deprecated render interface.

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