如何用css less嵌套与变量优化组件样式

在开发前端组件时，CSS 的重复和结构混乱常常导致维护困难。使用 Less 可以通过变量和嵌套机制显著提升样式代码的可读性和复用性。下面介绍如何结合 Less 的这两个特性来优化组件样式。

使用变量统一设计值

将颜色、字体、间距等公共样式提取为变量，便于统一管理和主题切换。

示例：

• @primary-color: #1890ff; // 主色调
• @border-radius: 4px; // 圆角大小
• @font-size-base: 14px; // 基础字号
• @spacing: 16px; // 常用间距

之后在组件中引用这些变量，比如：

立即学习“前端免费学习笔记（深入）”；

.button {
  background-color: @primary-color;
  font-size: @font-size-base;
  padding: @spacing / 2 @spacing;
  border-radius: @border-radius;
}

一旦设计调整，只需修改变量值，所有使用该变量的组件自动更新。

利用嵌套简化结构选择器

Less 允许你在父选择器内部嵌套子元素，使结构更清晰，减少重复书写父级类名。

示例：一个卡片组件

.card {
  border: 1px solid #ddd;
  border-radius: @border-radius;
  overflow: hidden;

  &__header {
    background: #f5f5f5;
    padding: @spacing;
    font-weight: bold;
  }

  &__body {
    padding: @spacing;
    color: #333;

    p {
      margin-bottom: @spacing / 2;
    }
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
    padding: @spacing / 2 @spacing;
    border-top: 1px solid #eee;

    .button {
      margin-left: @spacing / 2;
    }
  }
}

这里使用了 BEM 命名规范配合嵌套，& 符号代表父选择器，生成如 .card__header 这样的类名，结构清晰且易于维护。

组合变量与嵌套实现主题化

你可以定义多套变量（如深色/浅色主题），然后在不同上下文中引入。

示例：

• @theme-bg: #fff;
• @theme-text: #000;

再封装成 mixin：

.define-theme(@bg, @text) {
  background-color: @bg;
  color: @text;

  .card__header {
    background: lighten(@bg, 10%);
  }
}

然后在需要的地方调用：

.card.light {
  .define-theme(#fff, #000);
}

.card.dark {
  .define-theme(#1a1a1a, #fff);
}

这样就能轻松实现组件的主题切换。

避免过度嵌套保持可读性

虽然嵌套很强大，但建议不超过 3 层。过深的嵌套会生成过于具体的选择器，增加权重，不利于覆盖样式。

错误示例：

.card {
  .header {
    .title {
      span { color: red; } // 生成 .card .header .title span，太深
    }
  }
}

应简化为扁平结构，依靠语义类名而非层级关系定位。