gulp-autoprefixer中的级联选项

Posted 2023-01-29

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

autoprefixer( cascade: false )

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

在文档中我读到：

cascade（boolean）：如果CSS未压缩，Autoprefixer应该使用Visual Cascade。默认值：true

所以我用cascade编译了我的SASS到CSS：false和cascade是真的，我在两种情况下得到了相同的结果：我的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选项负责什么？

非常感谢您的回答。

答案

我当然也对此感到好奇，并在cascade: true（这是默认值）时注意到以下内容：

鉴于这种：

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

autoprefixer输出：

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; 

另一答案

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

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

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