{"library":"sass","title":"Sass (Pure JavaScript Implementation)","description":"The `sass` npm package provides a pure JavaScript implementation of the Sass preprocessor, enabling developers to compile SCSS and Sass files into CSS. It is currently at version 1.99.0 and receives frequent, iterative updates, with new features and bug fixes released regularly as seen in its changelog. This package is a compilation of Dart Sass to JavaScript, making it highly portable with no native dependencies, unlike `node-sass` which relies on LibSass (C++). It offers both a command-line interface and a Node.js API, featuring modern asynchronous and synchronous `compile` functions for transforming Sass code. While it maintains a legacy API compatible with `node-sass` (`render`, `renderSync`), this API is deprecated and slated for removal in Dart Sass 2.0.0, distinguishing its usage patterns from older Sass integrations. Its key differentiators include platform independence, official support from the Sass team, and predictable evolution, providing a robust and evolving solution for CSS preprocessing in JavaScript environments.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install sass"],"cli":{"name":"sass","version":null}},"imports":["import { compile } from 'sass';","import { compileAsync } from 'sass';","import * as sass from 'sass';","import { Logger } from 'sass';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { compile, compileAsync } from 'sass';\nimport * as fs from 'fs/promises';\nimport * as path from 'path';\n\nasync function runSassExample() {\n  const scssContent = `\n    $primary-color: #337ab7;\n    $font-stack: Helvetica, sans-serif;\n\n    body {\n      font: 100% $font-stack;\n      color: #333;\n    }\n\n    .button {\n      background-color: $primary-color;\n      color: white;\n      padding: 10px 15px;\n      border: none;\n      &:hover {\n        background-color: darken($primary-color, 10%);\n      }\n    }\n  `;\n\n  const tempScssFile = path.join(process.cwd(), 'styles.scss');\n  const tempCssFileSync = path.join(process.cwd(), 'styles-sync.css');\n  const tempCssFileAsync = path.join(process.cwd(), 'styles-async.css');\n\n  try {\n    await fs.writeFile(tempScssFile, scssContent);\n    console.log(`Wrote temporary SCSS to ${tempScssFile}`);\n\n    // Synchronous compilation (often faster for local files than async)\n    const syncResult = compile(tempScssFile);\n    await fs.writeFile(tempCssFileSync, syncResult.css);\n    console.log(`\\nCompiled SCSS synchronously to ${tempCssFileSync}:\\n${syncResult.css}`);\n\n    // Asynchronous compilation (generally preferred for non-blocking I/O, but can be slower for simple local files)\n    const asyncResult = await compileAsync(tempScssFile);\n    await fs.writeFile(tempCssFileAsync, asyncResult.css);\n    console.log(`\\nCompiled SCSS asynchronously to ${tempCssFileAsync}:\\n${asyncResult.css}`);\n\n  } catch (error) {\n    console.error('Sass compilation failed:', error);\n  } finally {\n    // Clean up temporary files\n    await fs.unlink(tempScssFile).catch(() => {});\n    await fs.unlink(tempCssFileSync).catch(() => {});\n    await fs.unlink(tempCssFileAsync).catch(() => {});\n    console.log('\\nCleaned up temporary files.');\n  }\n}\n\nrunSassExample();","lang":"typescript","description":"This quickstart demonstrates both synchronous (`compile`) and asynchronous (`compileAsync`) compilation of a simple SCSS string into CSS, writing the output to temporary files. It showcases common Sass features like variables and nesting, and cleans up after execution.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}