能否在LESS中缩放123px 123px格式的多值尺寸？

当然可以实现这类复合尺寸的缩放需求！不过直接用 calc(@imgSize * 1.5px) 是行不通的——LESS 的 calc() 没法直接解析带空格的复合值，而且这里的缩放因子也不该带单位（否则会出现 px*px 这种无效单位）。下面给你几种实用的解决方案：

方法1：拆分变量为单独维度（最直观） #

把复合尺寸拆成单独的宽度和高度变量，分别缩放后再组合回去，兼容性最好：

@imgWidth: 500px;
@imgHeight: 333px;
@scaleFactor: 1.5; // 无单位的缩放因子

@imgSizeAdj: calc(@imgWidth * @scaleFactor) calc(@imgHeight * @scaleFactor);

这样得到的 @imgSizeAdj 就是 750px 499.5px，可以直接用在 background-size、width/height 这类属性上。

方法2：用LESS内置函数拆分复合变量（适合已有复合变量的场景） #

如果已经有了类似 @imgSize: 500px 333px 的复合变量，可以用 LESS 3.9+ 支持的 split() 函数拆分，再分别提取缩放：

@imgSize: 500px 333px;
@scaleFactor: 1.5;

// 把复合尺寸拆成数组
@sizeComponents: split(@imgSize, ' ');
// 提取宽高并分别缩放
@scaledWidth: calc(extract(@sizeComponents, 1) * @scaleFactor);
@scaledHeight: calc(extract(@sizeComponents, 2) * @scaleFactor);
// 组合成新的复合尺寸
@imgSizeAdj: @scaledWidth @scaledHeight;

这种方法不用修改原变量的结构，适合快速复用已有变量的场景。

方法3：封装混入（Mixin）实现复用 #

如果需要多次对不同复合尺寸进行缩放，可以把逻辑封装成混入，调用更方便：

// 定义混入：传入复合尺寸和缩放因子，输出缩放后的尺寸变量
.scale-complex-size(@originalSize, @scale) {
  @sizeParts: split(@originalSize, ' ');
  @scaledW: calc(extract(@sizeParts, 1) * @scale);
  @scaledH: calc(extract(@sizeParts, 2) * @scale);
  @scaledSize: @scaledW @scaledH;
}

// 使用示例
@bannerSize: 1200px 675px;
@cardSize: 300px 200px;

// 缩放banner尺寸
.scale-complex-size(@bannerSize, 1.2);
.banner {
  background-size: @scaledSize;
}

// 缩放卡片尺寸
.scale-complex-size(@cardSize, 0.8);
.card {
  background-size: @scaledSize;
}

重要注意事项 #

• 缩放因子不要带单位！比如用 1.5 而不是 1.5px，否则 calc() 会计算出 px*px 这种浏览器无法识别的无效单位。
• 如果你的LESS版本低于3.9，split() 函数不可用，建议升级LESS或者改用方法1。

内容的提问来源于stack exchange，提问作者Oliver Watkins