css - gulp-autoprefixer 中的级联选项

Question

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

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

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

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 的cascade: 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:horizo​​ntal; 后面的行中的缩进

但是，如果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; }