SASS 是否插入浏览器前缀以实现兼容性？答案

【问题标题】：Does SASS insert browser prefixes for compatibility?SASS 是否插入浏览器前缀以实现兼容性？
【发布时间】：2021-12-07 09:31:03
【问题描述】：

我注意到 sass 编译器在某些属性中插入了一些前缀，例如 ms 和 -webkit。示例：

.box-container {
  display: grid;
  width: 100vw;
  height: 100vh;
  gap: 1rem;
  grid-template-columns: 60% 30%;
  justify-content: center;
  align-content: center;
  grid-template-rows: 30% 50%;

  grid-template-areas: "item-1 item-2" "item-1 item-3";
}

编译的 CSS 版本：

.box-container {
  display: -ms-grid;
  display: grid;
  width: 100vw;
  height: 100vh;
  gap: 1rem;
  -ms-grid-columns: 60% 30%;
      grid-template-columns: 60% 30%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-grid-rows: 30% 50%;
      grid-template-rows: 30% 50%;
      grid-template-areas: "item-1 item-2" "item-1 item-3";
}

这是否解决了某些浏览器中的一些兼容性问题？那么这是否意味着使用 sass 可以改善 CSS 中的兼容性问题？

【问题讨论】：

标签： css sass cross-browser

【解决方案1】：

SASS/SCSS 不会为特定浏览器自动插入类似的前缀。如果您通过 Gulp 之类的工具运行 Sass，那么其中可能有一个像 Autoprefixer 之类的包为您做前缀，这实际上使您的代码在浏览器之间更加兼容。

【讨论】：