将 IE 网格文档移动到单独的文件中

作者: ghost创建于 2020年5月12日更新于 2021年5月16日

大家好， 也许这个问题会重复（我已经在已关闭的问题中搜索过，但我没有找到任何相关信息）。请看下面的代码（grid: no-autoplace）：

scss

.l-values-grid {
  grid-gap: 3.5rem 2.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "value-1 value-2 value-3" "value-4 value-5 value-6";
}
.l-values-grid > *:nth-child(1) {
  grid-area: value-1;
}
.l-values-grid > *:nth-child(2) {
  grid-area: value-2;
}
.l-values-grid > *:nth-child(3) {
  grid-area: value-3;
}
.l-values-grid > *:nth-child(4) {
  grid-area: value-4;
}
.l-values-grid > *:nth-child(5) {
  grid-area: value-5;
}
.l-values-grid > *:nth-child(6) {
  grid-area: value-6;
}
@media screen and (min-width: 1200px) {
  .l-values-grid {
    grid-gap: 5rem 6.5rem;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

代码的第一部分在媒体查询中翻译得很好，包括正确的声明等。但是代码的第二部分有一个小问题，最终的 CSS 输出前缀为：

scss

@media screen and (min-width: 1200px) {
  .l-values-grid {
    grid-gap: 3.5rem 2.5rem;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

但是当我们添加一个重复的 grid-area 时，一切都运行良好。为什么 autoprefixer 不能"继承" grid-area 声明？

内容来源: postcss/autoprefixer

查看 GitHub 原文在 GitHub 查看讨论