SCSS中如何动态生成变量名及响应式媒体查询自定义类？

核心改造思路 #

• 首先将分散的断点变量重构为Sass Map结构，解决动态拼接变量名无法取值的问题
• 按媒体查询类型分两类处理：单断点类型（min、max）、双断点范围类型（from-to）
• 遍历所有变体、断点/断点组合，批量生成符合命名规范的类

完整实现代码 #

// 断点Map配置，替代原分散变量，方便动态取值
$breakpoints-map: (
  'xs': 0,
  'sm': 600px,
  'md': 960px,
  'lg': 1280px,
  'xl': 1920px
);
// 从map中提取断点key列表，兼容原有逻辑
$breakpoints: map-keys($breakpoints-map);
$media: 'min', 'max', 'from-to';
$variants: 'very-small', 'small', 'default', 'large', 'very-large';

// 原有媒体查询混合宏，调整参数接收断点key自动取值
@mixin media-min($bp-key) {
  $bp-val: map-get($breakpoints-map, $bp-key);
  @media only screen and (min-width: $bp-val) { @content; }
}

@mixin media-max($bp-key) {
  $bp-val: map-get($breakpoints-map, $bp-key);
  @media only screen and (max-width: $bp-val - 1px) { @content; }
}

@mixin media-from-to($bp-key1, $bp-key2) {
  $bp-val1: map-get($breakpoints-map, $bp-key1);
  $bp-val2: map-get($breakpoints-map, $bp-key2);
  @media only screen and (min-width: $bp-val1) and (max-width: $bp-val2 - 1px) { @content; }
}

// 批量生成类
@each $media-type in $media {
  // 处理单断点类型：min、max
  @if $media-type == 'min' or $media-type == 'max' {
    @each $variant in $variants {
      @each $bp in $breakpoints {
        .typo-style-#{$variant}-#{$media-type}-#{$bp} {
          @if $media-type == 'min' {
            @include media-min($bp) {
              @include typo-style($variant, 'important');
            }
          } @else {
            @include media-max($bp) {
              @include typo-style($variant, 'important');
            }
          }
        }
      }
    }
  }
  // 处理双断点范围类型：from-to
  @else if $media-type == 'from-to' {
    @each $variant in $variants {
      // 两层循环遍历所有合法断点对（后一个断点索引大于前一个，避免无效范围）
      @for $i from 1 through length($breakpoints) - 1 {
        $bp-from: nth($breakpoints, $i);
        @for $j from $i + 1 through length($breakpoints) {
          $bp-to: nth($breakpoints, $j);
          // 生成符合要求的类名：.typo-style-{variant}-from-{bp1}-to-{bp2}
          .typo-style-#{$variant}-from-#{$bp-from}-to-#{$bp-to} {
            @include media-from-to($bp-from, $bp-to) {
              @include typo-style($variant, 'important');
            }
          }
        }
      }
    }
  }
}

关键说明 #

Sass原生不支持$res-mat-#{$breakpoint}这种动态拼接变量名的写法，改用Map结构通过key取值是该场景下的通用解决方案。上述代码生成的from-to类型类完全符合要求，示例如下：

.typo-style-very-small-from-sm-to-md
.typo-style-large-from-sm-to-lg

内容的提问来源于stack exchange，提问作者Budi