如何编写正确的Sass mixin实现奇偶子元素交替内边距适配图文布局

核心问题原因 #

你原有代码的问题核心是混淆了Sass编译时逻辑和CSS运行时逻辑。
Sass的@if是编译阶段执行的判断语句，编译过程中无法感知最终页面DOM元素的排列顺序，所以@if (&:nth-child(odd))这个条件在编译时永远无法命中，只会输出else分支的样式，自然达不到交替效果。

基础修复版代码 #

直接在mixin内生成CSS原生的奇偶选择器规则即可，无需使用@if：

@mixin alternating-padding() {
  /* 奇数项文本居右，左内边距为5em，右为0 */
  &:nth-child(odd) {
    padding: 5em 0 5em 5em;
  }
  /* 偶数项文本居左，右内边距为5em，左为0 */
  &:nth-child(even) {
    padding: 5em 5em 5em 0;
  }
}

调用方式和你原来的完全一致，不需要修改：

&__text {
  @extend .col-6;
  @include alternating-padding;
  text-align: left;
}

常见DOM结构适配说明 #

如果你的文本容器是图文项的子元素（绝大多数场景都是这个结构），比如DOM结构如下：

<div class="content-list">
  <!-- 第1个图文项 -->
  <div class="content-item">
    <div class="content-item__img"></div>
    <div class="content-item__text"></div>
  </div>
  <!-- 第2个图文项 -->
  <div class="content-item">
    <div class="content-item__img"></div>
    <div class="content-item__text"></div>
  </div>
</div>

需要调整mixin的选择器层级，把奇偶判断放到父级图文项上，否则:nth-child只会判断文本容器在自身父级内的排序，永远匹配不到正确规则：

@mixin alternating-padding() {
  /* 父级图文项为奇数时，文本左内边距5em */
  :nth-child(odd) > & {
    padding: 5em 0 5em 5em;
  }
  /* 父级图文项为偶数时，文本右内边距5em */
  :nth-child(even) > & {
    padding: 5em 5em 5em 0;
  }
}

调用方式保持不变即可。

可配置优化版 #

如果需要更灵活的间距调整，可以把间距作为参数传入mixin，默认值保留你原来的5em：

@mixin alternating-padding($vertical: 5em, $horizontal: 5em) {
  :nth-child(odd) > & {
    padding: $vertical 0 $vertical $horizontal;
  }
  :nth-child(even) > & {
    padding: $vertical $horizontal $vertical 0;
  }
}

// 调用示例：自定义上下内边距为4em，左右交替的间距为6em
&__text {
  @extend .col-6;
  @include alternating-padding(4em, 6em);
  text-align: left;
}

注意事项 #

• 要确保所有图文项是同级兄弟元素，中间没有插入其他无关元素，否则:nth-child的计数会出现偏差
• 如果同级有其他类型的元素，可以把:nth-child替换为:nth-of-type，按照元素类型计数更准确

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