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

Question

我注意到 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 中的兼容性问题？

Answer 1

SASS/SCSS 不会为特定浏览器自动插入前缀。如果你运行 Sass 通过 Gulp 之类的东西，那里可能有一个像 Autoprefixer 这样的包正在为你做这个前缀，这实际上使你的代码更符合浏览器。

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

Does SASS insert browser prefixes for compatibility?

css

sass

cross-browser