Sass Introspection Functions

Sass Tutorial

Sass Introspection Functions

Sass Introspection Functions are used to inspect variables and values—to find out what type they are, whether they exist, and how they behave.
They are extremely useful in advanced Sass, mixins, functions, and framework-level logic.

💡 Think of introspection as “asking Sass questions about data”.

🔹 Why Use Introspection Functions?

They help you:

  • Write flexible & reusable mixins

  • Prevent errors

  • Handle different data types dynamically

  • Build robust Sass libraries

🔹 Common Sass Introspection Functions

1️⃣ type-of()

Returns the type of a value.

type-of(10px);

✔ Output:

number

Other outputs:

  • string

  • color

  • list

  • map

  • bool

  • null

2️⃣ unit()

Returns the unit of a number.

unit(15em);

✔ Output:

em

3️⃣ unitless()

Checks if a number has no unit.

unitless(10);

✔ Output:

true

4️⃣ comparable()

Checks if two numbers can be compared.

comparable(10px, 1em);

✔ Output:

false

5️⃣ variable-exists()

Checks if a variable exists.

variable-exists(primary-color);

✔ Output:

true / false

6️⃣ global-variable-exists()

Checks for a global variable.

global-variable-exists(primary-color);

7️⃣ function-exists()

Checks if a function exists.

function-exists(darken);

✔ Output:

true

8️⃣ mixin-exists()

Checks if a mixin exists.

mixin-exists(center);

9️⃣ feature-exists()

Checks if a Sass feature is supported.

feature-exists("at-error");

🔟 call()

Calls a function dynamically.

call("darken", red, 10%);

✔ Output:

#cc0000

🔹 Practical Example (Safe Mixin)

@mixin safe-padding($value) {
@if type-of($value) == number and unit($value) == px {
padding: $value;
} @else {
@error "Only px values allowed!";
}
}.box {
@include safe-padding(20px);
}

🔹 Dynamic Function Call Example

$fn: "lighten";

.button {
background: call($fn, blue, 20%);
}

❗ Important Notes

✔ Mainly for advanced Sass users
✔ Helpful for writing defensive code
✔ Makes mixins flexible and safe
✔ Overuse can make code complex

📌 Summary

  • Introspection inspects data types & existence

  • Essential for advanced mixins/functions

  • Helps prevent errors

  • Used heavily in Sass frameworks

You may also like...