SCSS: -ms-prefix causes error in CSS file

I am using the Live Sass Compiler in Visual Studio Code.

My SCSS file contains this grid:

$grid-cols: 12;
$grid-gutter-x: 16px;
$grid-gutter-y: 16px;

.grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat($grid-cols, minmax(0, 1fr)) !important; 
    grid-gap: $grid-gutter-x $grid-gutter-y;
}

The compiled CSS code:

.grid {
  position: relative;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[12] !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-gap: 16px 16px;
}

As a result, I get four errors:

] expected
semi-colon expected
{ expected
{ expected

This line causes the errors:

 -ms-grid-columns: (minmax(0, 1fr))[12] !important;

My Question is: Is it possible to ignore the following line? Can I prevent my compiler to add the -ms prefix? Or is there another way to solve this problem?

 grid-template-columns: repeat($grid-cols, minmax(0, 1fr)) !important;

Solution

You can check the Live Sass Complier documentation

And you will see this:

liveSassCompile.settings.autoprefix : Automatically add vendor prefixes to unsupported CSS properties (e. g. transform -> -ms-transform).

Specify what browsers to target with an array of strings (uses Browserslist).

Set null to turn off. (Default is null)

Example:
"liveSassCompile.settings.autoprefix": [
   "> 1%",
   "last 2 versions"    
]

So if this is null by default check if you already set this in your settings, if so change accordingly to fix your issue