SASS中如何在@keyframes动画块内定义屏幕媒体查询？

不能直接在@keyframes的关键帧内部嵌套媒体查询——不管是原生CSS还是SASS都不支持这种写法，你提供的示例代码无法生效正是因为这个原因。

CSS规范明确规定，@keyframes的关键帧内部只能包含属性-值对，不允许嵌套@media这类规则；SASS作为预处理器，最终会编译成标准CSS，因此这种嵌套写法要么被编译工具忽略，要么直接报错。

如果你想实现不同屏幕尺寸下动画关键帧的差异化效果，可以参考以下两种实现方式：

方式一：媒体查询包裹@keyframes #

直接针对不同视口尺寸定义独立的动画规则，示例代码如下：

// 基础屏幕尺寸下的动画
@keyframes anim {
  0% {
    background: #512da8;
  }
  50% {
    background: #512da8;
    top: 26px;
  }
  100% {
    background: #311b92;
    width: 100%;
    border-radius: 0px;
    top: 26px;
  }
}

// 视口宽度≤1000px时的动画变体
@media(max-width: 1000px) {
  @keyframes anim {
    0% {
      background: #512da8;
    }
    50% {
      background: #512da8;
      top: 26px;
    }
    100% {
      background: #311b92;
      width: 100%;
      height: 250px;
      border-radius: 0px;
      top: 26px;
    }
  }
}

方式二：用SASS混合宏减少代码重复 #

通过混合宏封装重复的关键帧逻辑，仅传入差异化参数，示例代码如下：

// 封装动画关键帧的混合宏
@mixin anim-keyframes($height: auto) {
  0% {
    background: #512da8;
  }
  50% {
    background: #512da8;
    top: 26px;
  }
  100% {
    background: #311b92;
    width: 100%;
    height: $height;
    border-radius: 0px;
    top: 26px;
  }
}

// 基础动画
@keyframes anim {
  @include anim-keyframes();
}

// 小屏幕下的动画变体
@media(max-width: 1000px) {
  @keyframes anim {
    @include anim-keyframes(250px);
  }
}

以上两种方式都能实现你想要的“不同屏幕下动画关键帧有差异”的效果，且符合CSS和SASS的语法规范。

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