Less 运算 #

Less 支持在样式中进行算术运算，可以自动处理单位转换，让你能够动态计算尺寸、颜色等值。

算术运算 #

加法 #

less 
@base: 10px;

.box {
  width: @base + 5px;      // 15px
  padding: @base + 10;     // 20px（单位继承）
}

减法 #

less 
@base: 100px;

.box {
  width: @base - 20px;     // 80px
  margin: @base - 10;      // 90px
}

乘法 #

less 
@base: 10px;

.box {
  width: @base * 2;        // 20px
  padding: @base * 1.5;    // 15px
}

除法 #

less 
@base: 100px;

.box {
  width: @base / 2;        // 50px
  margin: @base / 4;       // 25px
}

⚠️ 注意：在严格数学模式下，除法需要使用括号或 ./ 语法。

严格数学模式 #

less 
// 普通模式
.box1 {
  font: 12px/1.5 sans-serif;  // 正常输出
}

// 严格数学模式 (--strict-math=on)
.box2 {
  font: 12px/1.5 sans-serif;  // 输出: 12px/1.5 sans-serif（不计算）
  width: (100px / 2);          // 50px（括号内计算）
}

单位处理 #

单位继承 #

运算结果会继承第一个操作数的单位：

less 
.box {
  width: 10px + 20;      // 30px
  height: 10 + 20px;     // 30px
  margin: 10px + 20em;   // 30px（使用第一个单位）
}

单位转换 #

Less 会自动转换单位：

less 
.box {
  width: 2cm + 10mm;     // 3cm
  height: 1in + 72pt;    // 2in
  margin: 100px + 1in;   // 196px（1in = 96px）
}

单位换算表 #

单位 换算关系
1in 96px
1in 72pt
1in 6pc
1cm 37.79px
1mm 3.78px

不兼容单位 #

不兼容的单位无法计算：

less 
.box {
  // 错误：px 和 s 无法转换
  // width: 10px + 2s;
  
  // 正确：使用 calc()
  width: calc(10px + 2s);
}

颜色运算 #

颜色加法 #

less 
@color: #111111;

.box {
  background: @color + #222222;  // #333333
}

颜色减法 #

less 
@color: #333333;

.box {
  background: @color - #111111;  // #222222
}

分量运算 #

颜色运算会分别对 R、G、B 分量进行：

less 
@color: #ff0000;

.box {
  background: @color + #001100;  // #ff1100
}

使用函数 #

推荐使用颜色函数代替直接运算：

less 
@primary: #007bff;

.button {
  background: @primary;
  border-color: darken(@primary, 10%);
  
  &:hover {
    background: lighten(@primary, 10%);
  }
}

运算优先级 #

Less 遵循标准的数学运算优先级：

  1. 括号 ()
  2. 乘除 * /
  3. 加减 + -
less 
.box {
  width: 10 + 2 * 5;      // 20（先乘后加）
  height: (10 + 2) * 5;   // 60（括号优先）
}

复杂运算 #

复合计算 #

less 
@base-width: 100px;
@padding: 20px;
@border: 1px;

.box {
  width: @base-width - (@padding * 2) - (@border * 2);  // 58px
}

使用函数 #

less 
@columns: 12;
@gutter: 20px;
@container: 1200px;

.column {
  width: (@container - (@gutter * (@columns - 1))) / @columns;  // 98.33px
  margin-right: @gutter;
  
  &:last-child {
    margin-right: 0;
  }
}

calc() 函数 #

保留 calc() #

使用 ~"" 或 e() 保留 CSS calc()：

less 
@base: 100px;

.box {
  // 方法一：使用 ~""
  width: calc(~"100% - @{base}");
  
  // 方法二：使用 e()
  height: e("calc(100vh - 60px)");
}

动态值 #

less 
@header-height: 60px;
@footer-height: 40px;

.main {
  height: calc(~"100vh - @{header-height} - @{footer-height}");
}

实用示例 #

栅格系统 #

less 
@columns: 12;
@gutter: 30px;
@container: 1200px;

.container {
  width: @container;
  margin: 0 auto;
}

.row {
  margin-left: -@gutter / 2;
  margin-right: -@gutter / 2;
  
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.col(@span) {
  float: left;
  width: percentage((@span / @columns));
  padding-left: @gutter / 2;
  padding-right: @gutter / 2;
}

.col-1 { .col(1); }
.col-2 { .col(2); }
.col-3 { .col(3); }
.col-4 { .col(4); }
.col-6 { .col(6); }
.col-12 { .col(12); }

响应式字体 #

less 
@base-font-size: 16px;
@scale-ratio: 1.25;

h1 { font-size: @base-font-size * pow(@scale-ratio, 4); }  // ~40px
h2 { font-size: @base-font-size * pow(@scale-ratio, 3); }  // ~32px
h3 { font-size: @base-font-size * pow(@scale-ratio, 2); }  // ~25px
h4 { font-size: @base-font-size * pow(@scale-ratio, 1); }  // ~20px
h5 { font-size: @base-font-size; }                          // 16px
h6 { font-size: @base-font-size / @scale-ratio; }          // ~13px

间距系统 #

less 
@spacing-unit: 8px;

// 生成间距工具类
.generate-spacing(@n, @i: 0) when (@i =< @n) {
  .p-@{i} { padding: @i * @spacing-unit; }
  .m-@{i} { margin: @i * @spacing-unit; }
  
  .pt-@{i} { padding-top: @i * @spacing-unit; }
  .pr-@{i} { padding-right: @i * @spacing-unit; }
  .pb-@{i} { padding-bottom: @i * @spacing-unit; }
  .pl-@{i} { padding-left: @i * @spacing-unit; }
  
  .mt-@{i} { margin-top: @i * @spacing-unit; }
  .mr-@{i} { margin-right: @i * @spacing-unit; }
  .mb-@{i} { margin-bottom: @i * @spacing-unit; }
  .ml-@{i} { margin-left: @i * @spacing-unit; }
  
  .generate-spacing(@n, @i + 1);
}

.generate-spacing(6);

百分比计算 #

less 
@total-width: 1200px;
@sidebar-width: 300px;
@content-width: @total-width - @sidebar-width;

.sidebar {
  width: percentage(@sidebar-width / @total-width);  // 25%
}

.content {
  width: percentage(@content-width / @total-width);  // 75%
}

三角形 #

less 
.triangle(@direction, @size, @color) when (@direction = up) {
  width: 0;
  height: 0;
  border-left: @size solid transparent;
  border-right: @size solid transparent;
  border-bottom: @size * 1.732 solid @color;  // √3 ≈ 1.732
}

.triangle(@direction, @size, @color) when (@direction = down) {
  width: 0;
  height: 0;
  border-left: @size solid transparent;
  border-right: @size solid transparent;
  border-top: @size * 1.732 solid @color;
}

.triangle(@direction, @size, @color) when (@direction = left) {
  width: 0;
  height: 0;
  border-top: @size solid transparent;
  border-bottom: @size solid transparent;
  border-right: @size * 1.732 solid @color;
}

.triangle(@direction, @size, @color) when (@direction = right) {
  width: 0;
  height: 0;
  border-top: @size solid transparent;
  border-bottom: @size solid transparent;
  border-left: @size * 1.732 solid @color;
}

.arrow-up { .triangle(up, 10px, #333); }
.arrow-down { .triangle(down, 10px, #333); }
.arrow-left { .triangle(left, 10px, #333); }
.arrow-right { .triangle(right, 10px, #333); }

最佳实践 #

使用括号明确优先级 #

less 
// 推荐
.box {
  width: (100px - 20px) / 2;
}

// 不推荐（可读性差）
.box {
  width: 100px - 20px / 2;
}

使用变量存储中间值 #

less 
// 推荐
@base: 100px;
@padding: 20px;
@content-width: @base - @padding * 2;

.box {
  width: @content-width;
}

// 不推荐
.box {
  width: 100px - 20px * 2;
}

复杂计算使用函数 #

less 
// 推荐
.box {
  width: floor((100% - 30px) / 3);
}

避免过度计算 #

less 
// 推荐：使用有意义的变量名
@sidebar-width: 300px;
@content-width: calc(100% - @sidebar-width);

// 不推荐：魔法数字
.content {
  width: calc(100% - 300px);
}

下一步 #

现在你已经掌握了运算，接下来学习 导入 来模块化管理样式文件！

最后更新：2026-03-28