Tutorials

Sass type-of() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 91 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The type-of() function in Sass is a utility function used to determine the type of a given value. In Sass, different types include numbers, strings, colors, lists, maps, and more.

The type-of() function is essential when writing complex stylesheets where you need to perform operations based on the type of values.

This function helps you write more dynamic and flexible Sass code by allowing you to conditionally handle different types of data.

💡 Syntax

The syntax of the type-of() function is simple and intuitive:

Syntax

Copied

type-of(value)

🔢 Parameters

value: The value can be of any type in Sass, such as a number, string, color, list, map, boolean, or null.

↩️ Return Value

The function returns a string representing the type of the value provided. The possible return values are:

string
number
color
list
map
bool
null

📝 Example Usage

Let’s look at some examples to see how the type-of() function can be used in various scenarios.

📜 Example 1: Determining the Type of a Number

example.scss

Copied

$value: 42;
$type: type-of($value);

body {
  content: $type; // Outputs: "number"
}

In this example, 42 is a number, so type-of($value) returns "number".

📜 Example 2: Working with Strings

example.scss

Copied

$value: "Hello, Sass!";
$type: type-of($value);

h1 {
  content: $type; // Outputs: "string"
}

Here, the type-of() function identifies the value as a string and returns "string".

📜 Example 3: Identifying a Color

example.scss

Copied

$value: #ff5733;
$type: type-of($value);

button {
  background-color: $value;
  content: $type; // Outputs: "color"
}

In this case, the value #ff5733 is a color, so type-of($value) returns "color".

📜 Example 4: Handling Lists

example.scss

Copied

$value: (10px, 20px, 30px);
$type: type-of($value);

ul {
  margin: $value;
  content: $type; // Outputs: "list"
}

When you pass a list of values to type-of(), it correctly identifies it as a "list".

📜 Example 5: Working with Maps

example.scss

Copied

$value: (primary: #ff0000, secondary: #00ff00);
$type: type-of($value);

footer {
  color: map-get($value, primary);
  content: $type; // Outputs: "map"
}

For maps, the type-of() function returns "map", making it easy to handle key-value pairs dynamically.

🎉 Conclusion

The type-of() function in Sass is a fundamental tool for any developer looking to create dynamic, flexible, and maintainable stylesheets. By determining the type of a value, you can write more robust code that adapts to different inputs, ensuring your styles behave as expected across various scenarios.

Understanding the different data types in Sass and how to work with them using functions like type-of() can significantly enhance your ability to build complex stylesheets. Whether you're creating a design system, a component library, or just a simple stylesheet, knowing how to leverage type-of() will make your Sass code more powerful and adaptable.