Less

Less 的优势一直都很明确：语法接近 CSS，上手成本低，放进老项目里也不容易出大问题。

很多人第一次接触样式预处理器，其实就是从 Less 开始的。尤其是在中后台、Ant Design 生态、历史 Webpack 项目里，Less 仍然很常见。

Less 的定位

Less 更适合这样理解：

• 在 CSS 基础上补一层变量、嵌套、混入和函数
• 尽量不改变原来的 CSS 阅读习惯
• 更强调“渐进增强”，而不是彻底换一种写法

所以它的学习门槛一直不高。

Less 最常见的特性

1. 变量

Less 用 @ 声明变量。

@brand-color: #1677ff;
@radius-base: 12px;
@content-width: 1200px;

.card {
  color: @brand-color;
  border-radius: @radius-base;
  max-width: @content-width;
}

这一层最直接的价值，就是把颜色、尺寸、层级和间距先收口。

2. 嵌套

.nav {
  display: flex;

  .nav-item {
    padding: 8px 12px;

    &:hover {
      color: @brand-color;
    }
  }
}

嵌套能让层级关系更直观，但层数一多也会把选择器写重。真实项目里通常还是建议控制在 3 层左右。

3. 混入（Mixin）

.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  .flex-center();
  height: 40px;
}

Less 的 mixin 很适合抽：

• 居中布局
• 单行省略
• 多行截断
• 弹层定位
• 按钮尺寸

4. 参数化混入

.rounded(@radius: 12px) {
  border-radius: @radius;
}

.card {
  .rounded(16px);
}

.badge {
  .rounded(999px);
}

这层一加，复用会比纯复制样式顺很多。

5. 运算

@base-gap: 8px;

.grid {
  gap: @base-gap * 2;
  padding: @base-gap * 3;
}

Less 支持数值计算，也支持一部分颜色函数。

6. 函数

@brand-color: #1677ff;

.button {
  background: @brand-color;
}

.button:hover {
  background: darken(@brand-color, 8%);
}

常见函数一般是：

• darken
• lighten
• fade
• percentage
• unit

7. 条件和守卫

Less 的条件能力常见于 mixin guard。

.button-size(@size) when (@size = small) {
  height: 32px;
  padding: 0 12px;
}

.button-size(@size) when (@size = large) {
  height: 44px;
  padding: 0 20px;
}

这类写法在设计系统按钮、输入框、Tag 这种场景里会很常见。

Less 在真实项目里常见怎么用

1. 主题变量

很多老项目会把颜色、字号、圆角、间距单独抽成 variables.less：

@primary-color: #1677ff;
@success-color: #16a34a;
@warning-color: #f59e0b;
@danger-color: #ef4444;
@font-size-base: 14px;

2. 全局 mixin

.text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absolute-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 模块化拆分

@import './variables.less';
@import './mixins.less';
@import './reset.less';

老项目里这套结构非常常见。

在前端项目里怎么集成

Vite

pnpm add -D less

Vite 本身就能识别 .less 文件，通常不需要额外复杂配置。

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "./src/styles/variables.less";`,
      },
    },
  },
})

其中 javascriptEnabled 在接一些旧 UI 库或历史 Less 写法时会比较常见。

Webpack

pnpm add -D less less-loader css-loader style-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
}

Less 现在最常见的场景

• 老中后台系统
• Ant Design 定制主题
• 历史 Webpack 项目
• 老项目维护和渐进迁移

Less 的优点

• 语法接近 CSS
• 学习成本低
• 改老项目压力小
• 变量、mixins、嵌套这些能力够用

Less 的局限

• 社区热度不如 SCSS
• 模块系统和生态不如 Sass 完整
• 新项目里主动选 Less 的越来越少

一个更实际的判断

如果项目已经是 Less，就没必要为了“现代化”立刻全量改成 SCSS。

更稳的做法通常是：

• 继续维护 Less
• 只在局部重构时引入新的 token 约定
• 评估是否把主题能力逐步迁到 CSS variables

和 SCSS 的差别，先记住哪几条

• Less 用 @ 变量，SCSS 用 $
• Less 的 mixin 和 guard 很常见
• SCSS 的生态和模块化能力更完整
• Less 更常出现在老项目和 Ant Design 生态里

适合什么时候重点学

• 需要维护存量项目
• 需要定制老版本 Ant Design 主题
• 需要读懂历史样式架构