Does SASS insert browser prefixes for compatibility?-CodePudding

I notice that the sass compiler inserts some prefixes such as ms and -webkit in some properties. Example:

.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";
}

Compiled CSS version:

.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";
}

Does this solve some compatibility problems in some browsers? So does this mean that using sass improves compatibility problems in our CSS?

CodePudding user response：

SASS/SCSS doesn't automatically insert prefixes like that for specific browsers. If you're running Sass through something like Gulp, there's probably a package in there like Autoprefixer which is doing that prefixing for you, which does in fact make your code much more compliant across browsers.