Удалить / удалить атрибут из миксина

Question

Следующий код .scss:

@mixin div-base {
  width: 100px;
  color: red;
}

#data {
  @include div-base;
}

произведет:

#data {
  width: 100px;
  color: red; }

Я хотел бы сделать что-то вроде:

#data {
  @include div-base;
  remove or delete: width right here
}

для производства:

#data {
  color: red;
}

Можно ли вообще что-то сделать в этом направлении?

Answer 1

Лучший способ сделать это - использовать аргументы в вашем миксине:

@mixin div-base($width: 100px, $color: red) {
  @if $width != false { width: $width; }
  @if $color != false { color: $color; }
}

#data {
  @include div-base($color: false);
}

Answer 2

Этого же эффекта можно добиться, установив для ширины значение по умолчанию (установите auto):

@mixin div-base {
  width: 100px;
  color: red;
}

#data {
  @include div-base;
  width: auto;
}