Sass嵌套媒体查询时为何不遵循CSS属性顺序？是否为预期行为？

这是Sass从3.3版本开始就明确的预期设计行为，并非编译异常或bug，核心逻辑和Sass对嵌套@规则的处理机制直接相关。

核心产生原因 #

Sass编译嵌套样式块时，不会严格按照SCSS源码的逐行书写顺序拼接最终CSS，而是会对块内的内容做两类拆分处理：

• 第一类是平级的普通CSS属性，编译时会跳过所有嵌套的@规则，把块里所有普通属性提取出来，完全按照这些属性在源码里的相对书写顺序，聚合到同一个CSS声明块里输出。
• 第二类是嵌套的@media、@supports这类@规则，编译时会把这些嵌套规则从属性序列里完整剥离，统一提升到当前选择器声明块的外部位置，集中输出。
  对应给出的示例，SCSS里.myContainer块的普通属性是margin: 1px和margin-top: 3px，两个属性之间夹的@media代码会被Sass先标记为待提升的@规则，不会插入到两个属性的中间位置打断属性聚合，最终就会出现可观察到的效果：两个普通属性被排在一起完整输出，媒体查询被挪到了声明块外面。

设计初衷 #

如果Sass严格按源码书写顺序逐行输出CSS，最终生成的代码会变成碎片化的结构：

逐行输出的冗余CSS示例：

.myContainer {
  margin: 1px;
}
@media only screen and (min-width: 768) {
  .myContainer {
    margin: 2px;
  }
}
.myContainer {
  margin-top: 3px;
}

这种结构会重复生成同一个选择器，不仅增大CSS文件体积，也和前端开发中「先写全基础样式块，再写媒体查询覆盖规则」的常规书写习惯不符。Sass的@规则提升逻辑，本质是为了聚合同选择器的所有基础属性，减少冗余的重复选择器代码。

常见认知误区 #

这个处理逻辑并不会主动对普通CSS属性做排序（比如按属性名字母序调整位置），普通属性之间的相对书写顺序是完全保留的。比如你调换SCSS里普通属性的位置：

.myContainer {
  margin-top: 3px;
  @media only screen and (min-width: 768) {
    margin: 2px;
  }
  margin: 1px;
}

编译后的基础样式块依然会严格保持margin-top: 3px在前、margin: 1px在后的相对顺序，只是中间嵌套的媒体查询被整体挪到了基础样式块的外部。 #

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