каскадная опция в gulp-autoprefixer

Question

При добавлении задачи автофиксирования из плагина gulp-autoprefixer я заметил параметр

autoprefixer({ cascade: false })

.И эта опция не была понятна для меня, что она делает.

В документации я прочитал, что:

cascade (логическое значение): должен ли Autoprefixer использовать Visual Cascade, если CSS не сжат,По умолчанию: true

Поэтому я скомпилировал свой SASS в CSS с помощью каскада: false и с каскадом true, и я получил одинаковый результат в обоих случаях: Мой 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; }

Скомпилировано в CSS с autoprefixer({ cascade: true }):

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

Итак, мой последний вопрос - Что заКаскад autoprefixer: ложь / истина, за которую отвечает опция?

Большое спасибо за ответ.

Answer 1

У меня был тот же вопрос, и вот что я нашел:

'Чтобы ваш CSS выглядел красиво, autoprefixer может каскадировать префиксы - добавляя пробелы, чтобы префиксы выстраивались в линию (хотя, есливы используете плагин минификации gulp, в конце концов это не будет иметь никакого значения) '

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

Answer 2

Мне на самом деле тоже было любопытно, и я заметил следующее, когда 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; }