Type Functions - (Less Functions)

Type functions in Less are functions that are used to manipulate data types. They take a value and return a boolean (true or false) or a string that indicates the type of the value. In this tutorial, we'll discuss the syntax, example, output, explanation, use, important points, and summary of some common type functions in Less.

isnumber()

The isnumber() function takes a value and returns true if the value is a number, and false otherwise.

Syntax

isnumber(value)

Example

.is-number {
  color: green;
  @if (isnumber(10)) {
    font-size: 20px;
  }
}

Output

.is-number {
  color: green;
  font-size: 20px;
}

Explanation

In this example, we used the isnumber() function to check if the value 10 is a number. Since it is a number, the function returns true and the @if block is executed.

isstring()

The isstring() function takes a value and returns true if the value is a string, and false otherwise.

Syntax

isstring(value)

Example

.is-string {
  color: green;
  @if (isstring("hello, world")) {
    font-size: 20px;
  }
}

Output

.is-string {
  color: green;
  font-size: 20px;
}

Explanation

In this example, we used the isstring() function to check if the value "hello, world" is a string. Since it is a string, the function returns true and the @if block is executed.

unit()

The unit() function takes a value and returns the unit of the value as a string. If the value has no unit, the function returns an empty string.

Syntax

unit(value)

Example

.has-unit {
  color: blue;
  font-size: 20px;
  @if (unit(10px) != "") {
    background-color: yellow;
  }
}
.no-unit {
  color: blue;
  font-size: 20;
  @if (unit(20) == "") {
    background-color: yellow;
  }
}

Output

.has-unit {
  color: blue;
  font-size: 20px;
  background-color: yellow;
}
.no-unit {
  color: blue;
  font-size: 20;
  background-color: yellow;
}

Explanation

In this example, we used the unit() function to check if the values 10px and 20 have a unit. The function returned "px" for 10px and an empty string for 20. Based on this, we applied different styles using the @if block.

Use

Type functions in Less are useful for checking the data types of values and manipulating them based on their types. They can be used in various scenarios, such as conditional statements or mixin definitions.

Important Points

• Type functions return either true, false, or a string indicating the type of the value.
• Type functions can be used in conditional statements or mixin definitions to manipulate values based on their types.

Summary

In this tutorial, we discussed some common type functions in Less, including isnumber(), isstring(), and unit(). We covered their syntax, example, output, explanation, use, and important points. With this knowledge, you can now use type functions to manipulate data types in your Less code.