CSS中的DRY原则：简化重复的容器查询

问题场景 #

正在学习(S)CSS，使用容器查询实现响应式布局，习惯将重复代码提取为函数，但以下重复的容器查询代码带来了困扰：

.sales-data-container {
    font-size: 0.6em;
}

@container learning-content (min-width: 45em) {
    .sales-data-container {
      font-size: 0.8em;
    }
}

@container learning-content (min-width: 54em) {
    .sales-data-container {
      font-size: 1em;
    }
}

@container learning-content (min-width: 70em) {
    .sales-data-container {
      font-size: 1.6em;
    }
}

@container learning-content (min-width: 90em) {
    .sales-data-container {
      font-size: 2em;
    }
}

// Potentially many more queries to handle various minimal widths in the same manner

核心需求是针对[[45em, 0.8em], [54em, 1em], [70em, 1.6em], [90em, 2em]]这组尺寸与字体大小的对应关系，避免重复编写结构一致的容器查询代码，寻求更简洁的写法。

解决方案：使用SCSS @each循环 #

利用SCSS的@each循环遍历断点配置列表，自动生成所有需要的容器查询代码，实现配置与代码分离，大幅提升可维护性。

方式1：键值对形式（可读性更强）

// 集中配置容器宽度与对应字体大小
$font-size-breakpoints: (
  45em: 0.8em,
  54em: 1em,
  70em: 1.6em,
  90em: 2em
);

// 基础样式
.sales-data-container {
  font-size: 0.6em;
}

// 自动生成所有容器查询
@each $container-width, $font-size in $font-size-breakpoints {
  @container learning-content (min-width: #{$container-width}) {
    .sales-data-container {
      font-size: $font-size;
    }
  }
}

方式2：列表嵌套形式（匹配你给出的原始结构）

// 使用你提供的列表结构
$font-size-breakpoints: [45em, 0.8em], [54em, 1em], [70em, 1.6em], [90em, 2em];

// 基础样式
.sales-data-container {
  font-size: 0.6em;
}

// 自动生成所有容器查询
@each $breakpoint in $font-size-breakpoints {
  @container learning-content (min-width: #{nth($breakpoint, 1)}) {
    .sales-data-container {
      font-size: nth($breakpoint, 2);
    }
  }
}

效果说明 #

两种写法编译后都会生成你原本手动编写的所有容器查询代码。后续需要新增或修改断点时，只需在$font-size-breakpoints变量中调整配置即可，无需重复编写相同的容器查询结构，完全符合DRY（Don't Repeat Yourself）原则。

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