混入 @mixin、@include

约 904 字大约 3 分钟

2025-04-09

在 Sass 中，@mixin 指令用于定义可重用的样式代码块，支持参数传递、逻辑控制和内容注入，是提高代码复用性和维护性的核心工具。以下是 @mixin 的详细用法和特性：

一、基本语法

1、`@mixin` 定义混入

使用 @mixin 关键字定义混入，可包含任意有效的 Sass/CSS 代码：

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

2、`@include` 调用混入

通过 @include 调用混入，将其样式插入到目标位置：

.navbar {
  @include reset-list;
  color: #333;
}

编译结果：

.navbar {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #333;
}

二、参数传递

1、基础使用

定义混入时声明参数，调用时按顺序传递值：

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color; 
}

.card {
  @include box-shadow(2px, 2px, 10px, rgba(0, 0, 0, 0.1));
}

2、默认值

为参数设置默认值，调用时可选择性传参：

@mixin button($bg: blue, $text: white) {
  background: $bg;
  color: $text;
}

.btn {
  @include button; // 使用默认值：blue, white
}

.btn-primary {
  @include button(red); // 覆盖 $bg，$text 仍为 white
}

3、可变参数列表

使用 ... 接收任意数量的参数：

@mixin transitions($properties...) {
  transition: $properties;
}

.element {
  @include transitions(opacity 0.3s, transform 0.5s);
}

三、高级特性

1、内容块注入（@content）

通过 @content 将外部样式块注入混入：

@mixin media($width) {
  @media (min-width: $width) {
    @content; // 外部传入的样式在此处展开
  }
}

@include media(768px) {
  .container {
    width: 90%;
  }
}

编译结果：

@media (min-width: 768px) {
  .container {
    width: 90%;
  }
}

2、选择器嵌套

在混入中定义嵌套结构：

@mixin hover-effect {
  &:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
  }
}

.button {
  @include hover-effect;
}

编译结果：

.button:hover {
  opacity: 0.8;
  transition: opacity 0.3s;
}

3、条件逻辑

结合 @if、@else 实现动态样式：

@mixin flex-direction($direction) {
  @if $direction == "column" {
    flex-direction: column;
  } @else {
    flex-direction: row;
  }
}

.sidebar {
  @include flex-direction(column);
}

四、作用域与变量

局部变量：混入内部定义的变量不会影响外部作用域。
全局变量：可通过 !global 强制提升作用域（慎用）。

示例：

@mixin example {
  $local-var: red; // 局部变量
  color: $local-var;
}

// 外部无法访问 $local-var

五、组合混入

混入可调用其他混入，实现代码分层：

@mixin base-style {
  padding: 10px;
  margin: 5px;
}

@mixin enhanced-style {
  @include base-style;
  border: 1px solid #ccc;
  border-radius: 4px;
}

六、最佳实践

1、单一职责原则

每个混入应专注于单一功能，例如：

处理浏览器前缀
定义响应式断点
生成通用动画

2、模块化设计

使用动词+名词格式，明确表达功能：

@mixin center-flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

3、避免过度使用

简单样式直接编写 CSS，混入适用于复杂逻辑或重复模式。

七、常见错误

错误示例	正确写法	说明
`@mixin error { color: red; }` `.alert { error; }`	`.alert { @include error; }`	必须用 `@include` 调用
`@mixin padding($x, $y) { ... }` `@include padding(10px);`	`@include padding(10px, 20px);`	参数数量必须匹配
在混入中修改全局变量	使用局部变量或参数传递	避免副作用

八、实战示例

1、响应式设计

@mixin respond-to($breakpoint) {
  @if $breakpoint == "phone" {
    @media (max-width: 599px) {
      @content;
    }
  } @else if $breakpoint == "tablet" {
    @media (min-width: 600px) {
      @content;
    }
  } @else {
    @error "Unknown breakpoint: #{$breakpoint}.";
  }
}

.header {
  font-size: 16px;

  @include respond-to("tablet") {
    font-size: 18px;
  }
}

2、浏览器前缀兼容

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.box {
  @include prefix(transform, rotate(30deg), webkit ms);
}

十、总结

@mixin 是 Sass 中实现代码复用和逻辑抽象的核心工具，通过参数化、条件判断和内容注入，能显著提升样式表的可维护性。合理运用混入，结合模块化设计（@use、@forward），可构建高效、灵活的 CSS 架构。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24