SCSS mixin пропустить аргументы по умолчанию

Question

У меня есть миксин:

@mixin flexBox( $directionVlaue: row, $justifyValue: flex-start, $alignValue: baseline ) {
  display: flex;
  flex-direction: $directionVlaue;
  justify-content: $justifyValue;
  align-items: $alignValue;
}

Теперь, если я использую его и передам аргументы, есть возможность пропустить один, поэтому мне не нужно писать все три аргумента все время:

.thing {
   @include flexBox(row, center, center);
}

Я не хочу указывать row здесь, потому что это значение по умолчанию. Так можно ли написать что-то вроде:

.thing {
   @include flexBox( , center, center); // leave first argument empty
}

Answer 1

Может быть, ключевые аргументы? Это позволяет определить конкретные аргументы.

https://sass -lang.com / документация / с-правилами / Mixin # принимать- произвольные-ключевое слово-аргументы

Answer 2

Вы не можете сделать это, но вместо этого вы можете использовать null значения. С null мы можем передать переменную без значения, и она будет исключена из вывода CSS, если мы не присвоим ей значение при включенииmixin.

Итак, в вашем случае: mixin

@mixin flexBox( $directionVlaue: null, $justifyValue: flex-start, $alignValue: baseline ) 

@ include

.thing {
   @include flexBox(center, center); 
}

В этом случае работает нулевое значение, потому что мы все еще можем определить необязательные аргументы без ненужного вывода CSS.Так что теперь, если мы передадим два значения, он будет выводить только эти объявления в CSS.

Так что, пока вы не определите какое-либо значение, оно будет нулевым