SCSS：-ms-prefix 导致 CSS 文件出错答案

【问题标题】：SCSS: -ms-prefix causes error in CSS fileSCSS：-ms-prefix 导致 CSS 文件出错
【发布时间】：2020-10-04 19:29:20
【问题描述】：

我在 Visual Studio Code 中使用 Live Sass 编译器。

我的 SCSS 文件包含这个网格：

$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;
}

编译后的 CSS 代码：

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

结果，我得到四个错误：

] expected
semi-colon expected
{ expected
{ expected

此行导致错误：

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

我的问题是：是否可以忽略以下行？我可以阻止我的编译器吗添加-ms 前缀？或者有没有其他方法可以解决这个问题？

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

【问题讨论】：

标签： css sass css-grid live-sass-compiler

【解决方案1】：

你可以查看 Live Sass Complier documentation

你会看到这个：

liveSassCompile.settings.autoprefix : 自动添加供应商不受支持的 CSS 属性的前缀（例如 transform -> -ms-transform)。

使用字符串数组指定要定位的浏览器（使用Browserslist）。

设置 null 以关闭。（默认为null）

例子：
"liveSassCompile.settings.autoprefix": [
   "> 1%",
   "last 2 versions"    
]

因此，如果默认情况下这是 null，请检查您是否已在设置中设置，如果是，请相应更改以解决您的问题

【讨论】：

【解决方案2】：

在 vscode 上使用最新版本（4.3.0）的 Live Sass 编译器扩展，它为我解决了同样的问题。

【讨论】：