gulp-autoprefixer 中的级联选项

Question

从 gulp-autoprefixer 插件添加自动修复任务时，我注意到

autoprefixer({ cascade: false })

选项。我不清楚这个选项在做什么。

在我读到的文档中：

cascade (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default: true

所以我使用 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; }

使用 autoprefixer({ cascade: true }) 编译为 CSS：

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

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

非常感谢您的回答。

Answer 1

其实我也对此很好奇，在 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; }

Answer 2

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

'To make your CSS look pretty, autoprefixer can cascade the prefixes—adding whitespace to make the prefixes line up (although, if you’re using the minification gulp plugin, it won’t make any difference in the end)'

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

gulp-autoprefixer 中的级联选项

cascade option in gulp-autoprefixer

css

gulp

gulp-sass

gulp-autoprefixer