运算

约 1244 字大约 4 分钟

2025-04-13

LESS（Leaner Style Sheets）作为 CSS 预处理器，其 运算功能 允许开发者直接在样式表中进行数学运算、颜色混合、单位转换等操作，极大提升了代码的动态性和可维护性。以下是对 LESS 运算功能的 系统性详解，涵盖语法、规则、实际场景及优化技巧：

一、运算的基本语法

LESS 支持对数值、颜色、变量进行数学运算，运算符包括：

+（加）
-（减）
*（乘）
/（除）
%（取余）

示例：基础数值运算

@base: 20px;
@padding: 5px;

.box {
  width: @base * 2; // 40px
  height: (@base + 10) / 2; // 15px（括号改变优先级）
  margin: 100% - 30px; // 混合单位（需谨慎）
}

二、单位处理规则

LESS 在运算时会智能处理单位，规则如下：

1、相同单位

直接运算，结果保留单位。

10px + 5px → 15px
2em * 3 → 6em

2、不同单位

加法/减法：以第一个操作数的单位为准，若无法转换则 忽略单位。

10px + 5em → 15px（警告：无效单位）
50% - 20px → 30%（警告：无效单位）

乘法/除法：生成复合单位（如 px*em），但 CSS 不支持，需手动处理。
```
2px * 3em → 6px*em（无效，需避免）
```

示例：单位转换技巧

// 转换为相同单位后再运算
@width: 100%;
@fixed-width: 200px;

.container {
  width: calc(@width - @fixed-width); // 使用 CSS calc() 函数处理混合单位
}

三、颜色运算

LESS 将颜色转换为 RGBA 格式，并对每个通道（R、G、B、A）进行独立运算。

1. 颜色加减

@color1: #336699; // RGB(51, 102, 153)
@color2: @color1 + #111; // 每个通道加 17 → RGB(68, 119, 170) → #4477aa
@color3: @color1 - 20; // 每个通道减 20 → RGB(31, 82, 133) → #1f5285

2. 颜色混合（乘法）

@base: #ff0000; // 红色
@mixed: @base * 0.5; // 每个通道乘 0.5 → RGB(127.5, 0, 0) → #7f0000

3. 颜色函数增强运算

LESS 提供内置函数简化颜色操作：

@color: #3498db;

.element {
  background: lighten(@color, 10%); // 调亮 10% → #4aa3df
  border: darken(@color, 20%); // 调暗 20% → #1a5480
  opacity: fade(@color, 50%); // 透明度 50% → rgba(52, 152, 219, 0.5)
}

四、高级运算技巧

1、结合条件语句

通过 when 实现条件判断，动态调整运算逻辑：

.button(@size) when (@size > 10px) {
  padding: @size * 0.5;
  font-size: @size;
}
.button(@size) when (default()) {
  padding: 5px;
  font-size: 12px;
}

.btn-large {
  .button(16px);
} // padding:8px; font-size:16px;
.btn-small {
  .button(8px);
} // padding:5px; font-size:12px;

2、字符串插值生成动态属性

@position: top;
@direction: margin;

.@{direction}-@{position} {
  // 生成 .margin-top
  @{direction}-@{position}: 10px;
}

3、使用 `calc()` 混合原生 CSS 运算

@sidebar-width: 250px;

.main-content {
  width: calc(100% - @sidebar-width); // 输出 CSS 原生 calc()
}

五、实际应用场景

1、动态生成栅格系统

@columns: 12;
@container-width: 1200px;
@gutter: 20px;

// 生成列宽
.generate-column(@col) {
  width: (@container-width / @columns) * @col - @gutter;
  margin: @gutter / 2;
}

.col-4 {
  .generate-column(4); // 宽度：1200/12*4 -20 = 380px
}

2、响应式间距工具类

@base-spacing: 8px;
@steps: 5;

.generate-spacing(@prefix, @property, @i: 1) when (@i <= @steps) {
  .@{prefix}-@{i} {
    @{property}: @base-spacing * @i;
  }
  .generate-spacing(@prefix, @property, @i + 1);
}

.generate-spacing(mt, margin-top); // 生成 .mt-1 到 .mt-5
.generate-spacing(pl, padding-left);

编译结果：

.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
... .pl-5 {
  padding-left: 40px;
}

3、主题颜色梯度生成

@primary: #3498db;
@steps: 4;

.generate-theme(@i: 1) when (@i <= @steps) {
  .theme-@{i} {
    background: @primary + (#111 * @i); // 颜色逐步加深
  }
  .generate-theme(@i + 1);
}
.generate-theme();

六、注意事项

1、除法运算

需用括号包裹或显式指定单位，避免与 CSS 语法冲突。

// 错误写法（LESS 会解析为 CSS 除法）
margin: 20px / 2; // 输出：20px/2

// 正确写法
margin: (20px / 2); // 输出：10px
margin: 30px / 2em; // 输出：15px/em（需确认单位合理性）

2、运算优先级

遵循数学规则（乘除优先于加减），建议用括号明确逻辑。

width: 100 + 20 * 5; // 200
height: (100 + 50) * 2; // 300

3、变量作用域

运算中的变量遵循 LESS 作用域规则（就近原则）。

@size: 10px;

.block {
  @size: 20px;
  padding: @size * 2; // 使用局部变量 → 40px
}

七、与其他预处理器的对比

特性	LESS	Sass
运算符	`+`, `-`, `*`, `/`, `%`	相同，额外支持 `==`, `!=`, `>` 等逻辑运算符
单位处理	自动转换，复杂单位需手动处理	支持单位转换函数（如 `1in + 2cm`）
颜色运算	基于通道的加减乘除	提供 `scale-color()` 等高级函数
动态属性	通过字符串插值生成	相同，支持更复杂的变量嵌入

八、总结

LESS 的运算功能为 CSS 开发注入动态能力，允许开发者通过变量和数学逻辑高效管理尺寸、颜色、间距等样式属性。关键点：

灵活处理单位：注意不同单位的兼容性，必要时使用 calc()。
颜色通道运算：精准控制颜色变化，结合函数简化操作。
结合其他特性：通过嵌套、循环、条件语句实现复杂动态样式。

通过合理运用运算功能，可以显著减少重复代码，构建可维护、可扩展的样式系统。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24