Tutorials

Sass comparable() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The comparable() function in Sass is a utility function used to check if two values can be compared in operations. This is particularly useful when you're working with units in your Sass code and want to ensure that operations between different values (like addition, subtraction, multiplication, etc.) are valid. If two values are "comparable," they can be safely used together in arithmetic operations without causing errors.

💡 Syntax

The syntax of the comparable() function is as follows:

Syntax

Copied

comparable(value1, value2)

🔢 Parameters

value1: This can be any type of value, including numbers with or without units, strings, colors, etc.
value2: This is the second value you want to compare against the first.

↩️ Return Value

The comparable() function returns a Boolean value:

true: if the two values can be compared (i.e., they are compatible for arithmetic operations).
false: if the two values are not comparable.

📝 Example Usage

Let's explore how the comparable() function can be applied in different scenarios.

📜 Example 1: Comparing Numbers with the Same Units

example.scss

Copied

$value1: 10px;
$value2: 20px;

$result: comparable($value1, $value2); // true

body {
  font-size: if($result, $value1 + $value2, $value1);
}

In this example, both $value1 and $value2 are numbers with the px unit. The comparable() function returns true, allowing the addition of the two values.

📜 Example 2: Comparing Numbers with Different Units

example.scss

Copied

$value1: 10px;
$value2: 2em;

$result: comparable($value1, $value2); // false

body {
  margin: if($result, $value1 + $value2, $value1);
}

Here, $value1 and $value2 have different units (px and em). The comparable() function returns false, preventing the addition of these two values, which would otherwise result in an error.

📜 Example 3: Comparing Numbers without Units

example.scss

Copied

$value1: 15;
$value2: 30;

$result: comparable($value1, $value2); // true

div {
  width: if($result, $value1 * 2, 100%);
}

When comparing unitless numbers, comparable() returns true, meaning they can be used together in operations like multiplication.

📜 Example 4: Comparing Incompatible Types

example.scss

Copied

$value1: 50px;
$value2: red;

$result: comparable($value1, $value2); // false

.alert {
  border-width: if($result, $value1, 1px);
}

In this example, $value1 is a number with a unit (px), and $value2 is a color. The comparable() function returns false since these two values are incompatible for comparison.

🎉 Conclusion

The comparable() function in Sass is a handy tool for ensuring that your code avoids errors when performing arithmetic operations. By checking if two values are comparable, you can write more robust and error-free stylesheets. This function is especially useful in mixins and functions where you want to ensure compatibility between values before performing operations.

By incorporating comparable() into your Sass toolkit, you can confidently manage unit-based values and prevent potential issues in your stylesheets, leading to cleaner and more maintainable code.