SCSS：-ms-prefix 导致 CSS 文件中的错误

Question

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; 

Answer 1

You can check the Live Sass Complier documentation

And you will see this:

liveSassCompile.settings.autoprefix : Automatically add vendor prefixes to unsupported CSS properties (eg 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

Answer 2

Use the latest version(4.3.0) of Live Sass Compiler extension on vscode, it fixed the same issue for me.