gulp-autoprefixer 中的级联选项答案

【问题标题】：cascade option in gulp-autoprefixergulp-autoprefixer 中的级联选项
【发布时间】：2018-11-20 14:31:04
【问题描述】：

在从 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

用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 选项负责什么？

非常感谢您的回答。

【问题讨论】：

标签： css gulp gulp-sass gulp-autoprefixer

【解决方案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; }

【讨论】：

【解决方案2】：

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

'为了让你的 CSS 看起来更漂亮，autoprefixer 可以级联前缀——添加空格使前缀对齐（虽然，如果你使用 minification gulp 插件，它不会在结束）'

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

【讨论】：