LESS中的运算有什么用？

LESS作为主流的CSS预处理器，内置的运算功能可以让开发者在样式代码中直接进行数值、颜色、变量等类型的计算，打破原生CSS只能写固定值的限制，大幅提升样式开发的灵活性和效率。

LESS运算支持的类型

LESS的运算可以作用于多种数据类型，常见的包括以下几类：

• 数值运算：支持像素、百分比、rem、em等单位，以及无单位数值的加减乘除计算，单位会按照运算规则自动处理。
• 颜色运算：可以对颜色的红、绿、蓝通道分别做加减计算，也可以调整颜色的透明度。
• 变量运算：可以直接对定义好的LESS变量进行运算，变量的值会先解析再参与计算。

LESS运算的实际作用

1. 减少重复代码，提升开发效率

在开发过程中，很多样式值存在关联，比如组件的内边距是外边距的一半，按钮的高度是字号的3倍，使用运算可以直接关联这些值，不需要重复写固定数值。

// 定义基础字号变量
@base_font_size: 14px;
// 标题字号是基础字号的1.5倍
@title_font_size: @base_font_size * 1.5;
// 按钮高度是字号的3倍
@btn_height: @title_font_size * 3;

.title {
  font-size: @title_font_size; // 输出21px
}
.btn {
  height: @btn_height; // 输出63px
  line-height: @btn_height;
}

2. 适配响应式布局更灵活

响应式开发中需要根据根字号计算rem值，或者根据容器宽度计算子元素占比，使用LESS运算可以直接完成计算，不需要手动换算。

// 设计稿宽度750px，根字号设置为75px，1rem=10px
@design_width: 750px;
@root_font_size: @design_width / 10; // 75px

// 设计稿中元素宽度200px，转换为rem
@element_width: 200px / @root_font_size; // 2.66666667rem

.container {
  width: 100%;
}
.element {
  width: @element_width;
}

3. 简化颜色调整逻辑

主题开发中经常需要基于基础色调整深浅、透明度，使用颜色运算可以快速生成衍生色，不需要手动查色值。

// 基础主题色
@primary_color: #1890ff;
// 浅色主题色，红色通道加30，绿色通道加20，蓝色通道减10
@light_primary_color: @primary_color + #1e140a;
// 半透明主题色
@transparent_primary_color: fade(@primary_color, 50%);

.header {
  background-color: @primary_color;
}
.header_light {
  background-color: @light_primary_color;
}
.header_transparent {
  background-color: @transparent_primary_color;
}

4. 让混合和函数更通用

在编写LESS混合时，结合运算可以让混合接收参数后动态计算样式值，适配更多使用场景。

// 定义带运算的混合，生成固定比例的宽高
.size(@width, @ratio: 0.5) {
  width: @width;
  height: @width * @ratio;
}

.box1 {
  .size(200px, 0.8); // 宽200px，高160px
}
.box2 {
  .size(300px); // 宽300px，高150px
}

LESS运算的注意事项

使用LESS运算时需要注意以下规则，避免出现不符合预期的结果：

• 加减乘除运算中，如果单位不兼容会直接报错，比如10px + 5rem是无法计算的。
• 除法运算需要用括号包裹，或者变量参与运算时才会生效，直接写10px / 2会被解析为10px除以2的语法，不会计算结果。
• 颜色运算是对每个通道单独计算，结果超过255会取255，小于0会取0，不会自动循环。

注意：LESS中的calc函数如果需要在浏览器中动态计算，需要加~符号避免被LESS提前运算，比如width: ~"calc(100% - 20px)"。

LESS运算前端样式预处理器修改时间：2026-07-02 23:51:30