Sass introspection functions provide insight into the internal state of your stylesheets, enabling you to dynamically query and manipulate various aspects of your styles. These functions allow you to inspect types, check existence, and even query metadata, offering a powerful way to create more adaptable and maintainable CSS. This guide explores Sass introspection functions with examples and practical applications.

Overview of Sass Introspection Functions:

Introspection functions in Sass help you examine values, types, and metadata within your stylesheets. They include:

  1. type-of()
  2. unit()
  3. unitless()
  4. inspect()
  5. variable-exists()
  6. global-variable-exists()
  7. function-exists()
  8. mixin-exists()
  9. content-exists()
1. type-of(): Checking Value Types

The type-of() function returns the type of a given value, such as “string,” “number,” “color,” “list,” “map,” or “boolean.”

Syntax: type-of($value)

Example:

$color: #3498db;
$number: 42;

.type-color {
  content: type-of($color); // Outputs: color
}

.type-number {
  content: type-of($number); // Outputs: number
}

Compiled CSS:

.type-color {
  content: "color";
}

.type-number {
  content: "number";
}
2. unit(): Extracting Units

The unit() function returns the unit portion of a number.

Syntax: unit($number)

Example:

$length: 10px;

.unit-length {
  content: unit($length); // Outputs: px
}

Compiled CSS:

.unit-length {
  content: "px";
}
3. unitless(): Checking for Units

The unitless() function checks if a number has no unit.

Syntax: unitless($number)

Example:

$number: 42;
$length: 10px;

.unitless-number {
  content: unitless($number); // Outputs: true
}

.unitless-length {
  content: unitless($length); // Outputs: false
}

Compiled CSS:

.unitless-number {
  content: "true";
}

.unitless-length {
  content: "false";
}
4. inspect(): Inspecting Values

The inspect() function returns a string representation of a value, useful for debugging.

Syntax: inspect($value)

Example:

$color: #3498db;
$list: (1, 2, 3);

.inspect-color {
  content: inspect($color); // Outputs: #3498db
}

.inspect-list {
  content: inspect($list); // Outputs: 1, 2, 3
}

Compiled CSS:

.inspect-color {
  content: "#3498db";
}

.inspect-list {
  content: "1, 2, 3";
}
5. variable-exists(): Checking Variable Existence

The variable-exists() function checks if a variable exists in the current scope.

Syntax: variable-exists($name)

Example:

$color: #3498db;

.variable-check {
  content: variable-exists(color); // Outputs: true
}

.variable-check-nonexistent {
  content: variable-exists(nonexistent); // Outputs: false
}

Compiled CSS:

.variable-check {
  content: "true";
}

.variable-check-nonexistent {
  content: "false";
}
6. global-variable-exists(): Checking Global Variable Existence

The global-variable-exists() function checks if a variable exists globally.

Syntax: global-variable-exists($name)

Example:

$global-color: #3498db;

.global-variable-check {
  content: global-variable-exists(global-color); // Outputs: true
}

.global-variable-check-nonexistent {
  content: global-variable-exists(nonexistent); // Outputs: false
}

Compiled CSS:

.global-variable-check {
  content: "true";
}

.global-variable-check-nonexistent {
  content: "false";
}
7. function-exists(): Checking Function Existence

The function-exists() function checks if a function exists in the current scope.

Syntax: function-exists($name)

Example:

@function example-function() {
  @return "Hello!";
}

.function-check {
  content: function-exists(example-function); // Outputs: true
}

.function-check-nonexistent {
  content: function-exists(nonexistent-function); // Outputs: false
}

Compiled CSS:

.function-check {
  content: "true";
}

.function-check-nonexistent {
  content: "false";
}
8. mixin-exists(): Checking Mixin Existence

The mixin-exists() function checks if a mixin exists in the current scope.

Syntax: mixin-exists($name)

Example:

@mixin example-mixin {
  color: red;
}

.mixin-check {
  content: mixin-exists(example-mixin); // Outputs: true
}

.mixin-check-nonexistent {
  content: mixin-exists(nonexistent-mixin); // Outputs: false
}

Compiled CSS:

.mixin-check {
  content: "true";
}

.mixin-check-nonexistent {
  content: "false";
}
9. content-exists(): Checking Content Block Existence

The content-exists() function checks if a content block has been passed to the current mixin.

Syntax: content-exists()

Example:

@mixin example-mixin {
  @if content-exists() {
    @content;
  } @else {
    color: red;
  }
}

.include-check {
  @include example-mixin {
    color: blue;
  }
}

.no-content-check {
  @include example-mixin;
}

Compiled CSS:

.include-check {
  color: blue;
}

.no-content-check {
  color: red;
}

Practical Use Cases:

1. Conditional Styling Based on Variable Existence:

Check if a variable is defined before applying styles, allowing for more adaptable and resilient stylesheets.

Example:

$primary-color: #3498db;

body {
  @if variable-exists(primary-color) {
    color: $primary-color;
  }
}

Compiled CSS:

body {
  color: #3498db;
}
2. Debugging Complex Styles:

Use inspect() to output values for debugging without interrupting the normal styling flow.

Example:

$debug-value: (padding: 10px, margin: 20px);

.debug-output {
  content: inspect($debug-value);
}

Compiled CSS:

.debug-output {
  content: "(padding: 10px, margin: 20px)";
}
3. Dynamic Functionality:

Check if a function or mixin exists before attempting to use it, allowing for flexible inclusion of external libraries or themes.

Example:

@include example-mixin {
  @if function-exists(external-function) {
    content: external-function();
  } @else {
    content: "Function does not exist";
  }
}

Compiled CSS:

.example-mixin {
  content: "Function does not exist";
}

Conclusion:

Sass introspection functions offer essential tools for dynamically querying and adapting your styles based on internal state and metadata. By utilizing these functions, you can create more flexible, maintainable, and robust stylesheets, enhancing both development efficiency and the final user experience.