Less/Sass Mixins vs. Extend

Less/Sass Mixins vs. Extend

在 CSS 预处理器（Less 和 Sass）中，这几个功能都是为了实现代码复用，但它们的底层逻辑和生成的 CSS 结构有很大不同。

以下是精简的对比与使用指南：

概念及使用区别

1. Mixins（混合）

核心逻辑： "复制粘贴"。将一段代码直接插入到目标选择器中。

• Sass 用法： 使用 @mixin 定义，使用 @include 调用。
• Less 用法： 像定义类名一样定义（.name），直接调用。
• 特点： 支持传参（非常灵活），但如果多次调用，生成的 CSS 会有大量重复代码。

2. Extend（继承）

核心逻辑： "联合声明"。将当前选择器"推"到被继承的选择器所在的声明列表中。

• Sass 用法： @extend .base-class;
• Less 用法： &:extend(.base-class);
• 特点： 生成的 CSS 更加精简（多个选择器共用一套样式），不支持传参。

---

3. 具体区别对照表

特性	Mixins (@mixin / .mixin)	Extend (@extend)
主要目的	逻辑复用、动态生成样式	减少冗余、建立类之间的关系
参数传递	支持（可以像函数一样传参）	不支持（只能原样继承）
编译输出	代码被复制到每个调用的地方（体积可能变大）	编译为组合选择器（.a, .b { ... }）
最佳场景	需要根据变量改变样式的代码块	多个元素具有完全相同的基准样式

---

4. 语法示例

Sass 示例

// Mixin: 灵活，可传参
@mixin rounded($radius: 5px) {
  border-radius: $radius;
}

.box {
  @include rounded(10px);
}

// Extend: 精简，不可传参
.error-base {
  color: red;
  font-weight: bold;
}
.serious-error {
  @extend .error-base;
  border: 1px solid red;
}

Less 示例

// Mixin: 直接像函数一样用
.rounded(@radius: 5px) {
  border-radius: @radius;
}

.box {
  .rounded(10px);
}

// Extend
.error-base {
  color: red;
}
.serious-error {
  &:extend(.error-base);
  border: 1px solid red;
}

---

总结建议

• 如果你需要动态计算 （如处理浏览器前缀、计算宽高、颜色转换），请使用 Mixins。
• 如果你只是想让多个类共享一段完全相同 的样式，且希望 CSS 体积最小化，请使用 Extend。

响应式布局中 Mixin 的实战用法

在响应式布局中，Mixin 是最强大的工具，因为它能将复杂的媒体查询（Media Queries）封装成简单的语法。

以下是 Less 和 Sass 实现响应式断点的精简用法：

---

1. Sass 方案：利用 @content 传代码块

Sass 的优势在于可以将整个样式块传递进 Mixin。

// 1. 定义断点 Map
$breakpoints: (
  "md": 768px,
  "lg": 1024px,
);

// 2. 定义 Mixin
@mixin respond-to($canvas) {
  @if map-has-key($breakpoints, $canvas) {
    @media (min-width: map-get($breakpoints, $canvas)) {
      @content; // 这里会注入你调用时写的代码
    }
  }
}

// 3. 使用
.container {
  width: 100%;
  @include respond-to("md") {
    width: 750px;
  }
  @include respond-to("lg") {
    width: 1000px;
  }
}

---

2. Less 方案：利用"分离规则集"

Less 使用 @ruleset 变量来实现类似的功能。

// 1. 定义断点变量
@tablet: ~"(min-width: 768px)";
@desktop: ~"(min-width: 1024px)";

// 2. 定义 Mixin
.respond-to(@screen; @rules) {
  @media @screen {
    @rules(); // 调用传入的代码块
  }
}

// 3. 使用
.container {
  width: 100%;

  // 传参方式：参数一为断点，参数二为代码块
  .respond-to(@tablet, {
    width: 750px;
  });

  .respond-to(@desktop, {
    width: 1000px;
  });
}

---

核心区别

• Sass (@content)：语法最直观，像是在大括号内"填空"，是目前业界公认处理响应式最优雅的方式。
• Less (@rules) ：本质是把一段样式当成变量传递，写起来稍微多一点标点符号（如 , { ... }）。

建议： 如果你的项目还没定技术栈，做这类逻辑嵌套 较多的功能，Sass 的体验会更顺滑一些。