SASS | Introspection Functions
SASS Introspection functions allow you to inspect the conditions of SASS itself. You can not use them when you are making stylesheets, but they’re crucial for knowing what is going on when something does not work according to the way that you want.
The following table contains all introspection functions in SASS:
Function | Description | Example |
---|---|---|
variable-exists($name) | This method returns a Boolean value that represent whether the given variable exists, either globally or locally. | $x: 40px; variable-exists($x) Output: true variable-exists($y) Output: false |
global-variable-exists($name) | This method returns a Boolean value that represent whether the given variable exists globally. | $x: 40px; global-variable-exists($x); Output: true |
mixin-exists($name) | This method returns a Boolean value that represent whether the given mixin exists. | @mixin text-color {color: blue; } Output: true |
inspect($value) | This methods returns the value as it is given by SASS. | inspect(54) Output: “54” |
type-of($value) | This methods returns a string that represent the SASS data type of the value. | type-of(5 6 4 7 8 9) Output: “list” |
unit(number) | This methods returns the unit associated with the number, or a null string if the number is unitless. | $x: 40px; unit($x); Output: “px” $x: 40; unit($x); Output: “” |
unitless($number) | This methods returns a Boolean value that represent whether the given number has a unit associated with it or not. | $x: 40px; unitless($x); Output: false |
comparable($number1, $number2) | This methods returns a Boolean value that represent whether the given numbers can be added, subtracted or compared. | comparable(2em, 7em) Output: true comparable(2em, 4px) Output: false comparable(2em, 7) Output: true |