SCSS: -ms-prefix 在 CSS 文件中导致错误

Question

我在 Visual Studio 代码中使用 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;

Answer 1

您可以查看 Live Sass Complier documentation

你会看到这个：

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"    
]

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

Answer 2

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

SCSS: -ms-prefix 在 CSS 文件中导致错误

SCSS: -ms-prefix causes error in CSS file

css

sass

css-grid

live-sass-compiler