Разрыв строки кода со многими: не в scss

Question

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

input {
  &:not(.ant-calendar-input):not(.ant-time-picker-panel-input):not(.ant-calendar-picker-input):not(.ant-time-picker-input) {
    width: 100%;
    height: 100px;
  }

Я пробовал это, но это не работает:

input {
  &:not(.ant-calendar-input),
  &:not(.ant-time-picker-panel-input),
  &:not(.ant-calendar-picker-input),
  &:not(.ant-time-picker-input) {
    width: 100%;
    height: 100px;
  }

Answer 1

Ваш исходный SCSS эквивалентен следующему SCSS:

input {
  &:not(.ant-calendar-input) {
    &:not(.ant-time-picker-panel-input) {
      &:not(.ant-calendar-picker-input) {
        &:not(.ant-time-picker-input) {
          width: 100%;
          height: 100px;
        }
      }
    }
  }
}

Что выглядит немного лучше, чем SASS:

input
  &:not(.ant-calendar-input)
    &:not(.ant-time-picker-panel-input)
      &:not(.ant-calendar-picker-input)
        &:not(.ant-time-picker-input)
          width: 100%
          height: 100px