Sass unitless() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 43 - Views

⏳ 4 mins

💬 1 Comment

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

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

$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

$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

$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.