What are the type functions in LESS?

In LESS, the type function is a built-in function used to determine the type of a value. For example, it can be used to check if a value is a color, number, or string, among others. This feature is particularly useful when creating mixins or functions, allowing us to write more robust and flexible CSS code.

Example

Suppose we want to create a mixin that accepts any type of input, but the output varies depending on the input type. We can use the type() function to implement this:

less
.mixin(@value) {
  // Determine the type of the input value
  @type: type(@value);

  // Apply different styles based on the value's type
  .-(@type) when (@type = 'color') {
    color: @value;
  }
  .-(@type) when (@type = 'number') {
    font-size: @value;
  }
  .-(@type) when (@type = 'string') {
    content: @value;
  }
}

div {
  .mixin(#f00);   // Apply color
  .mixin(12px);   // Apply font-size
  .mixin("Hello"); // Apply content
}

In this example, the .mixin applies different CSS properties based on the type of the parameter passed to it. If the parameter is a color, it sets the color property; if it is a number, it sets the font-size; if it is a string, it sets the content property. This makes LESS code more flexible and powerful.