创见博客
Less的extends和Mixin
七崽爱吃小饼干2026/02/28阅读 2

extends和Mixin是less中最常用的两种代码复用特性。两者在实现原理上有所不同，最终编译生成的css文件也有所不同。

一、Mixin（混入）

Mixin 是 Less 中最常用的特性之一，可以把它理解成代码片段的复用 —— 你可以定义一段样式（比如一个类、ID 甚至是选择器），然后在其他地方直接“混入”这段样式，避免重复写相同的 CSS 代码。

1. 基础用法

less
// 定义一个Mixin（带括号的Mixin不会被编译成独立的CSS类）
.base-style() {
  color: #333;
  font-size: 14px;
  padding: 10px;
}

// 在其他选择器中混入这个样式
.button {
  .base-style(); // 混入base-style的所有样式
  background: #007bff;
  border: none;
}

.card {
  .base-style(); // 复用同一个Mixin
  border: 1px solid #eee;
  border-radius: 4px;
}

编译后的 CSS：

css
.button {
  color: #333;
  font-size: 14px;
  padding: 10px;
  background: #007bff;
  border: none;
}
.card {
  color: #333;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

2. 带参数的 Mixin（更灵活）

Mixin 还可以传参数，实现动态样式：

less
// 带默认参数的Mixin
.rounded(@radius: 4px) {
  border-radius: @radius;
}

.button {
  .rounded(); // 使用默认值4px
}

.card {
  .rounded(8px); // 传入自定义值8px
}

编译后的 CSS：

css
.button {
  border-radius: 4px;
}
.card {
  border-radius: 8px;
}

二、Extends（扩展）

Extends 是 Less 中另一种样式复用方式，核心是选择器的继承 —— 它不会把样式复制到目标选择器中，而是将目标选择器和被继承的选择器合并成一个选择器组，减少 CSS 代码体积。

1. 基础用法

less
// 定义基础样式（普通类选择器）
.base-style {
  color: #333;
  font-size: 14px;
  padding: 10px;
}

// 扩展base-style的样式
.button {
  &:extend(.base-style); // 继承base-style的所有样式
  background: #007bff;
  border: none;
}

.card {
  &:extend(.base-style); // 继承base-style的所有样式
  border: 1px solid #eee;
  border-radius: 4px;
}

编译后的 CSS：

css
.base-style, .button, .card {
  color: #333;
  font-size: 14px;
  padding: 10px;
}
.button {
  background: #007bff;
  border: none;
}
.card {
  border: 1px solid #eee;
  border-radius: 4px;
}

2. 扩展的进阶用法

  • 扩展所有匹配的选择器：&:extend(.base-style all);（比如继承 .base-style:hover 这类嵌套样式）
  • 全局扩展：@media screen { .button:extend(.base-style); }（跨媒体查询继承）

三、Mixin vs Extends 核心区别

特性Mixin（混入）Extends（扩展）
编译后表现把样式复制到目标选择器中合并选择器，样式只保留一份
代码体积可能冗余（重复样式）更精简（复用选择器）
灵活性支持参数、条件判断，灵活度高仅支持选择器继承，无参数功能
适用场景动态样式（如不同圆角、颜色）、局部样式静态样式复用（如基础布局、通用文本样式）

四、适用场景建议

  1. 用 Mixin 的场景：

    • 需要动态调整样式（比如不同尺寸的按钮、不同颜色的主题）；
    • 样式片段较短，且复用次数少（避免少量复用导致的代码冗余）；
    • 需要结合条件判断、循环等逻辑（Mixin 支持 when 条件、for 循环）。

  2. 用 Extends 的场景：

    • 通用静态样式（比如页面的基础文本样式、布局容器样式）；
    • 复用次数多的样式（比如全站通用的 .text-center、.clearfix）；
    • 追求 CSS 代码体积精简（比如生产环境优化）。

总结

  1. Mixin 是“复制式复用”，支持参数和逻辑，灵活但可能产生冗余代码，适合动态样式；
  2. Extends 是“合并式复用”，无冗余但不支持动态参数，适合静态通用样式；
  3. 实际开发中可结合使用：静态基础样式用 Extends 精简体积，动态样式用 Mixin 实现灵活调整。
评论
0/100