CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-node-sass

Node.js wrapper around libsass for compiling Sass and SCSS files to CSS

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

types.mddocs/

Sass Type System

Complete type system for creating and manipulating Sass values in custom functions, providing JavaScript interfaces for all Sass data types including colors, numbers, strings, lists, and maps.

Core Imports

const sass = require("node-sass");

Access types via:

const { types } = sass;
// or
const types = sass.types;

Capabilities

Boolean Type

Represents Sass boolean values with singleton instances for true and false.

/**
 * Create or get Sass boolean value (call syntax only, new throws TypeError)
 * @param value - JavaScript boolean value
 * @returns Singleton TRUE or FALSE instance
 */
function Boolean(value);                // Call syntax only

// Singleton constants
Boolean.TRUE;                       // Sass true singleton
Boolean.FALSE;                      // Sass false singleton

// Instance methods
getValue();                         // Returns JavaScript boolean

Singleton Access:

The Boolean type provides singleton instances for true and false values:

// Available singleton constants
sass.types.Boolean.TRUE;            // Sass true singleton
sass.types.Boolean.FALSE;           // Sass false singleton

// Also available as direct module exports
sass.TRUE;                          // Same as sass.types.Boolean.TRUE
sass.FALSE;                         // Same as sass.types.Boolean.FALSE

Usage Examples:

const sass = require("node-sass");

// Get boolean singletons (multiple ways)
const sassTrue1 = sass.types.Boolean(true);
const sassTrue2 = sass.types.Boolean.TRUE;
const sassTrue3 = sass.TRUE;  // Direct export

const sassFalse1 = sass.types.Boolean(false);
const sassFalse2 = sass.types.Boolean.FALSE;
const sassFalse3 = sass.FALSE;  // Direct export

// All TRUE variants are the same singleton
console.log(sassTrue1 === sassTrue2);  // true
console.log(sassTrue2 === sassTrue3);  // true

// Check values
console.log(sassTrue1.getValue());   // true
console.log(sassFalse1.getValue());  // false

// Use in custom functions
sass.render({
  data: ".test { display: if(is-mobile(), block, none); }",
  functions: {
    "is-mobile()": function(done) {
      const isMobile = false; // Example condition
      done(sass.types.Boolean(isMobile));
    }
  }
});

Color Type

Represents Sass color values with RGBA components.

/**
 * Create Sass color value
 * Supports 0, 1, 3, or 4 arguments (not 2)
 * @param r - Red component (0-255), default 0
 * @param g - Green component (0-255), default 0  
 * @param b - Blue component (0-255), default 0
 * @param a - Alpha component (0-1), default 1
 */
function Color();                       // Black (0,0,0,1)
function Color(b);                      // (0,0,b,0) 
function Color(r, g, b);                // RGB with alpha=1
function Color(r, g, b, a);             // Full RGBA

// Instance methods
getR();                             // Get red component (0-255)
getG();                             // Get green component (0-255)
getB();                             // Get blue component (0-255)
getA();                             // Get alpha component (0-1)
setR(value);                        // Set red component
setG(value);                        // Set green component
setB(value);                        // Set blue component
setA(value);                        // Set alpha component

Usage Examples:

const sass = require("node-sass");

// Create colors
const red = new sass.types.Color(255, 0, 0);      // Pure red
const blue = new sass.types.Color(0, 0, 255, 0.5); // Semi-transparent blue
const black = new sass.types.Color();              // Default black

// Manipulate colors
const color = new sass.types.Color(100, 150, 200);
console.log(color.getR());          // 100
color.setA(0.8);                    // Set alpha to 80%

// Use in custom functions
sass.render({
  data: ".test { color: lighten-color(#333, 0.2); }",
  functions: {
    "lighten-color($color, $amount)": function(color, amount, done) {
      const r = Math.min(255, color.getR() + (amount.getValue() * 255));
      const g = Math.min(255, color.getG() + (amount.getValue() * 255));
      const b = Math.min(255, color.getB() + (amount.getValue() * 255));
      
      const lightened = new sass.types.Color(r, g, b, color.getA());
      done(lightened);
    }
  }
});

Error Type

Represents Sass error values for custom function error handling.

/**
 * Create Sass error value
 * @param message - Error message string
 */
function Error(message);

Usage Example:

sass.render({
  data: ".test { width: validate-size(invalid); }",
  functions: {
    "validate-size($value)": function(value, done) {
      if (value instanceof sass.types.Number) {
        done(value);
      } else {
        done(new sass.types.Error("Expected a number"));
      }
    }
  }
});

List Type

Represents Sass list values with configurable separators.

/**
 * Create Sass list value
 * @param length - Initial list length, default 0
 * @param separator - true for comma, false for space, default true
 */
function List(length?, separator?);

// Instance methods
getLength();                        // Get list length
getSeparator();                     // Get separator (true=comma, false=space)
setSeparator(separator);            // Set separator (boolean: true=comma, false=space)
getValue(index);                    // Get value at index (0-based)
setValue(index, value);             // Set value at index

Usage Examples:

const sass = require("node-sass");

// Create lists
const spaceList = new sass.types.List(3, false);  // Space-separated
const commaList = new sass.types.List(2, true);   // Comma-separated

// Populate list
spaceList.setValue(0, new sass.types.Number(10, "px"));
spaceList.setValue(1, new sass.types.Number(20, "px"));
spaceList.setValue(2, new sass.types.Number(30, "px"));

// Use in custom functions
sass.render({
  data: ".test { margin: create-spacing(10px, 5px); }",
  functions: {
    "create-spacing($top, $side)": function(top, side, done) {
      const list = new sass.types.List(4, false); // Space-separated
      list.setValue(0, top);                       // top
      list.setValue(1, side);                      // right
      list.setValue(2, top);                       // bottom
      list.setValue(3, side);                      // left
      done(list);
    }
  }
});

Map Type

Represents Sass map values (key-value pairs).

/**
 * Create Sass map value
 * @param length - Initial map length, default 0
 */
function Map(length?);

// Instance methods
getLength();                        // Get map length
getKey(index);                      // Get key at index (0-based)
getValue(index);                    // Get value at index
setKey(index, key);                 // Set key at index
setValue(index, value);             // Set value at index

Usage Examples:

const sass = require("node-sass");

// Create and populate map
const breakpoints = new sass.types.Map(3);

// Set key-value pairs
breakpoints.setKey(0, new sass.types.String("mobile"));
breakpoints.setValue(0, new sass.types.Number(480, "px"));

breakpoints.setKey(1, new sass.types.String("tablet"));
breakpoints.setValue(1, new sass.types.Number(768, "px"));

breakpoints.setKey(2, new sass.types.String("desktop"));
breakpoints.setValue(2, new sass.types.Number(1024, "px"));

// Use in custom functions
sass.render({
  data: ".test { width: map-get-breakpoint('tablet'); }",
  functions: {
    "map-get-breakpoint($key)": function(key, done) {
      // Search through a predefined map
      const breakpoints = new sass.types.Map(2);
      breakpoints.setKey(0, new sass.types.String("mobile"));
      breakpoints.setValue(0, new sass.types.Number(480, "px"));
      breakpoints.setKey(1, new sass.types.String("tablet"));
      breakpoints.setValue(1, new sass.types.Number(768, "px"));
      
      for (let i = 0; i < breakpoints.getLength(); i++) {
        if (breakpoints.getKey(i).getValue() === key.getValue()) {
          done(breakpoints.getValue(i));
          return;
        }
      }
      
      done(sass.types.Null());
    }
  }
});

Null Type

Represents Sass null values.

/**
 * Get Sass null singleton (call syntax only, new throws TypeError)
 * @returns Null singleton instance
 */
function Null();                        // Call syntax only

// Singleton constant
Null.NULL;                          // Sass null singleton

Singleton Access:

The Null type provides a singleton instance:

// Available singleton constant
sass.types.Null.NULL;               // Sass null singleton

// Also available as direct module export
sass.NULL;                          // Same as sass.types.Null.NULL

Usage Example:

const sass = require("node-sass");

// Return null from custom functions (multiple ways)
sass.render({
  data: ".test { color: optional-value(); }",
  functions: {
    "optional-value()": function(done) {
      const hasValue = false; // Some condition
      if (hasValue) {
        done(new sass.types.Color(255, 0, 0));
      } else {
        // All of these are equivalent
        done(sass.types.Null());
        // done(sass.types.Null.NULL);
        // done(sass.NULL);
      }
    }
  }
});

Number Type

Represents Sass numeric values with optional units.

/**
 * Create Sass number value
 * @param value - Numeric value, default 0
 * @param unit - Unit string (e.g., "px", "em", "%"), default ""
 */
function Number(value?, unit?);

// Instance methods
getValue();                         // Get numeric value
setValue(value);                    // Set numeric value
getUnit();                          // Get unit string
setUnit(unit);                      // Set unit string

Usage Examples:

const sass = require("node-sass");

// Create numbers
const pixels = new sass.types.Number(16, "px");
const percent = new sass.types.Number(50, "%");
const unitless = new sass.types.Number(1.5);

// Manipulate numbers
console.log(pixels.getValue());     // 16
console.log(pixels.getUnit());      // "px"
pixels.setValue(20);
pixels.setUnit("em");

// Use in custom functions
sass.render({
  data: ".test { font-size: scale-font(16px, 1.2); }",
  functions: {
    "scale-font($base, $ratio)": function(base, ratio, done) {
      const scaledValue = base.getValue() * ratio.getValue();
      const result = new sass.types.Number(scaledValue, base.getUnit());
      done(result);
    }
  }
});

String Type

Represents Sass string values.

/**
 * Create Sass string value
 * @param value - String value, default ""
 */
function String(value?);

// Instance methods
getValue();                         // Get string value
setValue(value);                    // Set string value

Usage Examples:

const sass = require("node-sass");

// Create strings
const className = new sass.types.String("header");
const empty = new sass.types.String();

// Manipulate strings
console.log(className.getValue());  // "header"
className.setValue("footer");

// Use in custom functions
sass.render({
  data: '.test { content: quote-string("Hello World"); }',
  functions: {
    "quote-string($str)": function(str, done) {
      const quoted = new sass.types.String('"' + str.getValue() + '"');
      done(quoted);
    }
  }
});

Type Checking and Conversion

// Check type instances
function isType(value, Type) {
  return value instanceof sass.types[Type];
}

// Example type checking in custom functions
sass.render({
  data: ".test { result: process-value(16px); }",
  functions: {
    "process-value($value)": function(value, done) {
      if (value instanceof sass.types.Number) {
        // Handle number
        done(new sass.types.String("number: " + value.getValue()));
      } else if (value instanceof sass.types.String) {
        // Handle string
        done(new sass.types.String("string: " + value.getValue()));
      } else {
        done(new sass.types.Error("Unexpected type"));
      }
    }
  }
});

docs

cli.md

compilation.md

environment.md

index.md

types.md

tile.json