1

我在 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;
4

2 回答 2

0

您可以查看 Live Sass Complier文档

你会看到这个：

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

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

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

例子：

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

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

于 2020-06-15T11:43:39.600 回答
0

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

于 2021-01-08T06:43:16.570 回答