Less - 类型函数

LESS - 类型函数

在本章节中，我们将探讨 LESS 的类型函数（Type Functions）。这些函数对于检查和验证样式表内值的数据类型至关重要，它们支持条件逻辑和更健壮的 mixins。理解变量或值的类型能让你写出更灵活、更少出错的 LESS 代码。

LESS 提供了一系列以 ‘is-’ 开头的函数来检查值的类型。这些函数在 mixin guards（守卫）或条件逻辑中特别有用。

序号	类型函数及描述	示例 (概念性 LESS)
1	isnumber(value) 如果值是数字（带或不带单位），则返回 true，否则返回 false。	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) 如果值是字符串，则返回 true，否则返回 false。	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) 如果值是颜色（hex, named, rgb, hsl 等），则返回 true，否则返回 false。	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) 如果值是关键词（例如，auto，inherit），则返回 true，否则返回 false。	iskeyword(auto); // true
iskeyword(inherit); // true
iskeyword(1234); // false
iskeyword(24px); // false
iskeyword(red); // false
iskeyword(“variable”);// false
5	isurl(value) 如果值是 URL（例如，url(...)），则返回 true，否则返回 false。	isurl(url(‘/images/bg.png’)); // true
isurl(url(http://example.com/font.woff)); // true
isurl(‘image.png’); // false (这是一个字符串，不是 url() 调用)
isurl(keyword); // false
isurl(#fff); // false
6	ispixel(value) 如果值是带 px 单位的数字，则返回 true，否则返回 false。	ispixel(24px); // true
ispixel(0px); // true
ispixel(10.5px); // true
ispixel(24); // false (无单位数字)
ispixel(24em); // false
7	isem(value) 如果值是带 em 单位的数字，则返回 true，否则返回 false。	isem(2em); // true
isem(0.5em); // true
isem(12); // false
isem(24px); // false
isem(2rem); // false
8	ispercentage(value) 如果值是带 % 单位的数字，则返回 true，否则返回 false。	ispercentage(7.5%); // true
ispercentage(100%); // true
ispercentage(7.5); // false
ispercentage(24px); // false
9	isunit(value, unit) 如果值是带指定单位的数字，则返回 true。单位可以是字符串（例如，‘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 (无单位数字)
10	isruleset(value) 如果值是独立的规则集（detached ruleset），则返回 true，否则返回 false。独立的规则集是存储在变量中的规则块。	@myRules: {
color: green;
font-size: 16px;
}

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

实际应用：

类型函数常用于 mixin guards（混入守卫），以便根据参数类型应用不同的样式。例如，一个 mixin 可能接受像素值或百分比值来设定宽度：

.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%);
}

这确保了你的 mixins 是健壮的，可以优雅地处理不同类型的输入。