Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Introspection

Sass unitless() Function

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

Photo Credit to CodeToFun

🙋 Introduction

The unitless() function in Sass is a helpful utility that checks whether a given value has units or not. This function is particularly useful in situations where you need to perform calculations or comparisons on values without worrying about unit inconsistencies.

By using unitless(), you can ensure that your Sass code is more robust and less prone to errors caused by mixing unit-based values.

💡 Syntax

The syntax of the unitless() function is simple and straightforward. It takes a single argument:

Syntax
Copied
Copy To Clipboard
unitless(number)

đŸ”ĸ Parameters

  • number: This is the numeric value you want to evaluate. It can be a number with or without units (e.g., 10px, 5em, 100, 2rem).

↩ī¸ Return Value

The function returns a Boolean value:

  • true: if the number has no units.
  • false: if the number has units.

📝 Example Usage

Let's explore some examples to see how the unitless() function works in practice.

📜 Example 1: Checking a Unitless Number

example.scss
Copied
Copy To Clipboard
$val1: 10;
$val2: 20px;

@if unitless($val1) {
  .unitless-value {
    width: $val1 * 2;
  }
}

@if unitless($val2) {
  .unit-value {
    width: $val2;
  }
}

In this example, the unitless() function is used to check whether $val1 and $val2 have units. Since $val1 is unitless, the width property is calculated and applied. However, since $val2 has a unit (px), the condition will not be met, and the rule will not be applied.

📜 Example 2: Safeguarding Calculations

example.scss
Copied
Copy To Clipboard
$base-size: 16px;
$multiplier: 2;

$calculated-size: if(unitless($multiplier), $base-size * $multiplier, $base-size);

body {
  font-size: $calculated-size;
}

Here, the unitless() function ensures that the multiplier does not have any units. If it does, the calculation defaults to just using the $base-size.

📜 Example 3: Using unitless() with Conditional Logic

example.scss
Copied
Copy To Clipboard
$spacing: 10px;
$factor: 5;

.margin {
  margin-top: if(unitless($factor), $spacing * $factor, $spacing);
}

This example multiplies the $spacing by $factor only if $factor is unitless, preventing any potential errors from multiplying values with incompatible units.

🎉 Conclusion

The unitless() function in Sass is a valuable tool for working with numeric values, allowing you to verify whether a value is unitless before performing operations on it. This can help prevent common errors in your stylesheets, making your code more reliable and maintainable.

By incorporating unitless() into your Sass workflow, you can ensure that your calculations are performed correctly and avoid the pitfalls of mixing unit-based and unitless values. Understanding this function will help you write more resilient Sass code and better manage your CSS outputs.

👨‍đŸ’ģ 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