Introduction to Sass Introspection Functions

Sass Introspection Functions

Sass introspection refers to the ability of Sass to examine and manipulate its own data structures, including variables, maps, and functions. Sass provides a number of introspection functions that allow you to inspect and manipulate these structures in your code.

Here are some examples:

type-of($value): This function returns the data type of a Sass value.

As an example:

$type: type-of(42);
// Output: number

variable-exists($name): This function returns true if a variable with the given name exists in the current scope, and false otherwise.

As an example:

$my-variable: true;

$exists: variable-exists("my-variable");
// Output: true

global-variable-exists($name): This function returns true if a global variable with the given name exists, and false otherwise.

As an example:

$my-global-variable: true !global;

$exists: global-variable-exists("my-global-variable");
// Output: true

function-exists($name): This function returns true if a function with the given name exists, and false otherwise.

As an example:

@function my-function() {
  @return true;
}

$exists: function-exists("my-function");
// Output: true

inspect($value): This function returns a string representation of a Sass value, which is useful for debugging.

As an example:

$value: (one: 1, two: 2);

$inspect: inspect($value);
// Output: (one: 1, two: 2)

unit($number): This function returns the unit of a number.

As an example:

$number: 42px;

$unit: unit($number);
// Output: px

unitless($number): This function returns true if a number has no unit, and false otherwise.

As an example:

$number: 42;

$unitless: unitless($number);
// Output: true

keywords($args): This function returns a list of keywords passed as arguments to a function.

As an example:

@function my-function($arg1, $arg2, $arg3: default) {
  @return keywords($args);
}

$result: my-function(arg1, arg2, $arg3: value);
// Output: (arg1, arg2, $arg3: value)

feature-exists($feature): This function returns true if a CSS feature is supported by the current Sass compiler, and false otherwise.

As an example:

$exists: feature-exists(display-grid);
// Output: true

call($function, $args...): This function allows you to call a Sass function dynamically, using a string or variable to specify the function name.

As an example:

@function my-function($arg) {
  @return $arg * 2;
}

$value: call("my-function", 42);
// Output: 84

Sass Introspection Functions​

Sass Introspection Functions