时间戳

首页 > 解决方案 > SASS 是否插入浏览器前缀以实现兼容性？

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

问题描述

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

标签： csssasscross-browser

解决方案

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

推荐阅读