能否将多个Sass @include指令合并到同一行以避免样式重复？

嘿，这个操作完全可行！Sass本身就支持给断点混合器传入多个媒体查询参数，不用重复写两遍@include。

你可以直接把两个断点变量用逗号分隔，放在同一个@include breakpoint()调用里，写法如下：

@include breakpoint($media__phablet-to-tablet, $media__tablet-to-wide) {
  width: calc(100% - 30% / 1 );
  flex-direction: row;
  height: 200px;
}

这种写法和你原来两段重复代码的效果完全一致——Sass编译后会生成两个用逗号分隔的媒体查询（逻辑“或”的关系），只要页面匹配任意一个断点范围，就会应用这些样式。

如果你的断点混合器是自定义的，只要它支持接收多个参数并正确拼接成逗号分隔的媒体查询，这种写法就没问题。绝大多数主流的Sass断点工具库都原生支持这种多参数用法。

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