Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Numeric

Sass comparable() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁ī¸ 9 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass comparable() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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.

👨‍đŸ’ģ Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy