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