2

从 gulp-autoprefixer 插件添加 autoprfixing 任务时，我注意到

autoprefixer({ cascade: false })

选项。这个选项对我来说并不清楚它在做什么。

在文档中，我读到：

cascade (boolean)：如果 CSS 未压缩，Autoprefixer 是否应该使用 Visual Cascade。默认值：真

因此，我使用 cascade: false 和 cascade true 将我的 SASS 编译为 CSS，在这两种情况下我得到了相同的结果：我的 SASS：

body
display: flex
p
    display: flex

使用以下代码编译为 CSS autoprefixer({ cascade: false })：

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
body p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

使用以下代码编译为 CSS autoprefixer({ cascade: true })：

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
body p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

所以我的最后一个问题是 - autoprefixer 的 cascade: false/true 选项负责什么？

非常感谢您的回答。

4

2 回答 2

3

我实际上也对此感到好奇，并在cascade: true（默认情况下）注意到以下情况：

鉴于这种：

body {
    background: black;
  display: flex;
    flex-direction:  row-reverse; }

自动前缀输出：

body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

注意以下行中的缩进-webkit-box-orient: horizontal;

但是，如果cascade: false：

body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }
于 2019-02-06T02:31:26.523 回答
0

我有同样的问题，这就是我发现的：

'为了让你的 CSS 看起来更漂亮，autoprefixer 可以级联前缀——添加空格使前缀对齐（尽管，如果你使用 minification gulp 插件，它最终不会有任何区别）

-> https://www.futurehosting.com/blog/use-autoprefixer-to-speed-up-site-development/

于 2019-02-17T14:31:54.213 回答