Less - Type Functions

LESS - Type Functions

In this chapter, we will explore LESS Type Functions. These functions are essential for inspecting and verifying the data type of values within your stylesheets, enabling conditional logic and more robust mixins. Understanding the type of a variable or value allows you to write more flexible and error-resistant LESS code.

LESS provides a set of ‘is-’ functions to check the type of a value. These are particularly useful within mixin guards or conditional logic.

Sr.No.	Type Function & Description	Example (Conceptual LESS)
1	isnumber(value) Returns true if the value is a number (with or without units), false otherwise.	isnumber(1234); // true
isnumber(24px); // true
isnumber(7.8%); // true
isnumber(#fff); // false
isnumber(red); // false
isnumber(“variable”); // false
isnumber(keyword); // false
isnumber(url(…)); // false
2	isstring(value) Returns true if the value is a string, false otherwise.	isstring(“variable”); // true
isstring(1234); // false
isstring(24px); // false
isstring(7.8%); // false
isstring(#fff); // false
isstring(red); // false
isstring(keyword); // false
isstring(url(…)); // false
3	iscolor(value) Returns true if the value is a color (hex, named, rgb, hsl, etc.), false otherwise.	iscolor(#fff); // true
iscolor(red); // true
iscolor(rgba(0,0,0,0.5)); // true
iscolor(1234); // false
iscolor(24px); // false
iscolor(“variable”); // false
4	iskeyword(value) Returns true if the value is a keyword (e.g., auto, inherit), false otherwise.	iskeyword(auto); // true
iskeyword(inherit); // true
iskeyword(1234); // false
iskeyword(24px); // false
iskeyword(red); // false
iskeyword(“variable”);// false
5	isurl(value) Returns true if the value is a URL (e.g., url(...)), false otherwise.	isurl(url(‘/images/bg.png’)); // true
isurl(url(http://example.com/font.woff)); // true
isurl(‘image.png’); // false (this is a string, not a url() call)
isurl(keyword); // false
isurl(#fff); // false
6	ispixel(value) Returns true if the value is a number with px units, false otherwise.	ispixel(24px); // true
ispixel(0px); // true
ispixel(10.5px); // true
ispixel(24); // false (unitless number)
ispixel(24em); // false
7	isem(value) Returns true if the value is a number with em units, false otherwise.	isem(2em); // true
isem(0.5em); // true
isem(12); // false
isem(24px); // false
isem(2rem); // false
8	ispercentage(value) Returns true if the value is a number with % units, false otherwise.	ispercentage(7.5%); // true
ispercentage(100%); // true
ispercentage(7.5); // false
ispercentage(24px); // false
9	isunit(value, unit) Returns true if the value is a number with the specified unit. The unit can be a string (e.g., ‘px’, ’%’, ‘em’, ‘rem’).	isunit(10px, px); // true
isunit(10px, ‘px’); // true
isunit(5rem, rem); // true
isunit(7.8%, ’%’); // true
isunit(2.2vw, vw); // true
isunit(24px, rem); // false
isunit(48, ’%’); // false (unitless number)
10	isruleset(value) Returns true if the value is a detached ruleset, false otherwise. Detached rulesets are blocks of rules stored in a variable.	@myRules: {
color: green;
font-size: 16px;
}

isruleset(@myRules); // true
isruleset(blue); // false
isruleset("variable"); // false |

Practical Application:

Type functions are commonly used in mixin guards to apply different styles based on the type of an argument. For example, a mixin might accept either a pixel value or a percentage for a width:

.flexible-width(@size) when (ispixel(@size)) {
  width: @size;
  max-width: 100%; // Example additional rule for pixel sizes
}
.flexible-width(@size) when (ispercentage(@size)) {
  width: @size;
  min-width: 100px; // Example additional rule for percentage sizes
}

.element1 {
  .flexible-width(500px);
}
.element2 {
  .flexible-width(80%);
}

This ensures your mixins are robust and can handle different types of inputs gracefully.