Sass 响应式Mixin

Sass 响应式 Mixin 开发指南 · 难度：进阶 · +15XP

Sass 响应式 Mixin 开发指南

响应式设计是现代Web开发的基石，但手写大量@media查询既繁琐又容易出错。Sass的Mixin（混入）可以封装断点逻辑，让你用简洁的语法创建响应式样式，大幅减少重复代码。本节将教你从零构建一个专业的响应式Mixin系统。

基础断点变量

// 定义断点映射（推荐移动优先设计）
$breakpoints: (
  "sm": 576px,    // 手机横屏
  "md": 768px,    // 平板竖屏
  "lg": 992px,    // 平板横屏/小桌面
  "xl": 1200px,   // 桌面
  "xxl": 1400px   // 大桌面
);
// 或者用语义化命名
$bp-mobile: 576px;
$bp-tablet: 768px;
$bp-desktop: 992px;
$bp-wide: 1200px;

最简响应式Mixin

// min-width 移动优先（推荐方式）
@mixin respond-min($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @media (min-width: $breakpoint) {
      @content;
    }
  }
}

// 使用示例
.container {
  width: 100%;
  padding: 10px;
  @include respond-min("md") {
    max-width: 720px;
    padding: 20px;
  }
  @include respond-min("lg") {
    max-width: 960px;
    padding: 30px;
  }
}

max-width Mixin（桌面优先）

@mixin respond-max($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
      @content;
    }
  } @else {
    @media (max-width: $breakpoint) {
      @content;
    }
  }
}

// 使用示例（桌面优先风格）
.element {
  width: 1200px;
  @include respond-max("lg") {
    width: 960px;
  }
  @include respond-max("md") {
    width: 100%;
  }
}

完整响应式Mixin套件

// 组合Mixin：同时支持min和max
@mixin respond-between($min, $max) {
  @media (min-width: $min) and (max-width: $max - 1px) {
    @content;
  }
}

// 精确断点：只匹配两个相邻断点之间
@mixin respond-range($min-key, $max-key) {
  $min: map-get($breakpoints, $min-key);
  $max: map-get($breakpoints, $max-key);
  @media (min-width: $min) and (max-width: $max - 1px) {
    @content;
  }
}
// 适配retina高清屏
@mixin retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}
// 暗色模式
@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

实战：响应式网格系统

// 用响应式Mixin构建栅格系统
@mixin grid-columns($cols: 12) {
  display: grid;
  grid-template-columns: 1fr;     // 移动端单列

  @include respond-min("sm") {
    grid-template-columns: repeat(2, 1fr);  // sm以上2列
  }
  @include respond-min("md") {
    grid-template-columns: repeat(4, 1fr);  // md以上4列
  }
  @include respond-min("lg") {
    grid-template-columns: repeat($cols, 1fr);  // lg以上满列
  }
}
// 使用
.product-grid {
  @include grid-columns(12);
  gap: 20px;
}

实战练习

1. 创建自己的$breakpoints断点定义和respond-min mixin
2. 用Mixin实现移动优先的卡片组件（手机全宽、平板2列、桌面4列）
3. 编写一个针对手机（<768px）的样式，隐藏侧边栏
4. 创建retina高清适配Mixin，在高分屏上加载2x图片
5. 把项目中重复的@media写法全部替换为Mixin调用