在 LESS 中，内置数据类型（Data Types）定义了变量和函数可以操作的不同类型的值。这些数据类型与 CSS 的规范兼容，同时扩展了一些预处理器的特性。以下是 LESS 中支持的主要数据类型及其详细说明：

一、数值（Number）

LESS 支持整数、小数和带单位的数值，可进行数学运算（+, -, *, /, %）。

1、类型

• 整数：10, -5, 0
• 小数：3.14, -0.5
• 带单位：10px, 2em, 0.5rem

2、运算

• 加减乘除：直接使用数学运算符。
• 单位转换：LESS 会自动处理不同单位的运算，如 10px + 5em 会自动转换为相同单位，但不同单位可能无法直接相加。
• 百分比：50% 表示 50%。

3、注意事项

• 单位不一致：不同单位的数值运算可能会导致意外结果，应注意单位一致性。
• 单位运算：LESS 会自动处理单位转换，如 10px + 5em 会尝试计算，
• 除法需要注意：直接写 / 可能被解析为 CSS 除法，建议用括号包裹：

  margin: (20px / 2); // → 10px

4、示例

@size: 12px;
@ratio: 1.5;
@percent: 50%;

.element {
  width: @size * @ratio; // → 18px
  height: @percent / 2; // → 25%
}

二、颜色（Color）

LESS 支持所有 CSS 颜色格式，并允许颜色运算（加、减、乘、调亮/调暗等）。

1、颜色格式

@hex: #ff0000; // 16进制
@rgb: rgb(255, 0, 0); // RGB
@rgba: rgba(255, 0, 0, 0.5); // RGBA
@hsl: hsl(0, 100%, 50%); // HSL
@hsla: hsla(0, 100%, 50%, 0.5); // HSLA

2、颜色运算

@color: #336699;

.element {
  background: @color + #111; // → #4477aa
  border: darken(@color, 20%); // → #1a3d66
  opacity: fade(@color, 50%); // → rgba(51, 102, 153, 0.5)
}

3、内置颜色函数

• lighten(@color, 10%) - 调亮
• darken(@color, 10%) - 调暗
• fadein(@color, 10%) - 增加透明度
• mix(@color1, @color2, 50%) - 混合颜色

三、字符串（String）

字符串可以用引号（" " 或 ' '）包裹，也可以不带引号（如果无空格或特殊字符）。

1、字符串插值

使用 @{variable} 在字符串中嵌入变量：

@selector: banner;

.@{selector} {
  // → .banner
  width: 100%;
}

2、示例

@name: "Alice";
@font: "Open Sans";

.title {
  font-family: @font;
  content: "Hello, @{name}"; // 字符串插值 → "Hello, Alice"
}

四、布尔值（Boolean）

LESS 支持 true 和 false，通常用于条件判断（如 when 语句）。

示例

@dark-mode: true;

.theme() when (@dark-mode = true) {
  background: #000;
  color: #fff;
}

body {
  .theme();
}

五、列表（List）

列表是由 逗号或空格分隔 的一组值，常用于表示多个属性值（如 margin、box-shadow）。

1、列表函数

• length(@list) - 获取列表长度
• extract(@list, 1) - 提取第 n 项（索引从 1 开始）

@colors: red, green, blue;

.item-1 {
  color: extract(@colors, 1); // → red
}

2、示例

@spacing: 5px 10px 15px 20px; // 空格分隔
@fonts: "Arial", sans-serif; // 逗号分隔

.box {
  margin: @spacing;
  font-family: @fonts;
}

六、映射（Maps）

LESS 3.5+ 支持类似 JavaScript 对象的键值对结构（Map），用于存储复杂数据。

1、定义与访问

@theme: {
  primary: #3498db;
  text: #2c3e50;
};

.header {
  color: @theme[text]; // → #2c3e50
}

2、遍历 Map（需结合循环）

@icons: {
  home: "\f015";
  user: "\f007";
};

.each(@icons, {
  .icon-@{key}:before {
    content: @value;
  }
});

七、其他特殊值

类型	示例	说明
URL	url("image.png")	用于背景图、字体等路径
关键字	none、auto	CSS 原生关键字
百分比	50%	特殊数值类型

八、总结

类型	示例	用途
数值	12px, 3.14, 50%	尺寸、间距、透明度等
颜色	#ff0000, rgba(0,0,0,0.5)	背景、边框、文字颜色
字符串	"Arial", 'hello'	字体、内容生成
布尔值	true, false	条件判断
列表	1px solid #000	边框、阴影等复合属性
映射	{ key: value }	存储主题配置等结构化数据

这些数据类型可以结合 变量、运算 和 函数 使用，极大增强了 CSS 的动态能力。例如：

@base: 16px;
@theme: {
  primary: #3498db;
  spacing: @base * 1.5;
};

.card {
  padding: @theme[spacing]; // → 24px
  border: 1px solid darken(@theme[primary], 10%);
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24