关闭autoprefixer对部分代码的转换

[xinconan]

在使用 autoprefixer的时候，需要保留部分老的兼容代码不被转换丢失，如下面的 -webkit-box-orient: vertical; 如果不加注释忽略转换，就会被删除。

@mixin multi-line($a) {
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $a;
  overflow: hidden;
}

上面这种做法适用于8.4以下版本，推荐6.x版本。

从8.4版本开始，更改了注释规则。 autoprefixer: off会使后面所有的代码都生效。在使用过程中，还是出现以下警告：

Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

如果需要后面一行不生效，需要使用 autoprefixer: ignore next：

.logo {
    /* autoprefixer: ignore next */
    user-select: none; /* ← ignored */
    mask: url(mask.jpg); /* ← will be prefixed */
}

/* autoprefixer: ignore next */
::placholder /* ← ignored */ {
    text-decoration-style: dotted; /* ← will be prefixed */
}

[xgqfrms]

demo

.mult-lines-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
-  /*! autoprefixer: off */
+  /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
-  /* autoprefixer: on */
    -webkit-line-clamp: 3;
}