Целевой тип ввода в scss

Question

У меня есть этот код в scss.Есть ли какой-нибудь способ, как более эффективно нацеливать тип ввода?

  &__form {
    input {
      display:block;
    }
    [type="number"] {display:block;}
    [type="date"] {display:block;}
    [type="name"] {display:block;}
  }

например что-то вроде этого (но это не работает)

  &__form {
    input {
      display:block;
    }

    [type] {
      "number" {display:block}
      "name" {display:block}
      "date" {display:block}
    }
  }

РЕДАКТИРОВАТЬ: display:block isздесь не важно, это всего лишь фиктивные данные

Answer 1

Я не совсем уверен, для чего вы стреляете, но я предполагаю что-то вроде:

$inputs: number, date, name;

@each $input in $inputs{
  [type=#{$input}] {
    display: block;
  }
}

Answer 2

Вы можете разделить запятыми селекторы перед запуском блока правил:

.foo {
  &__form {
    input {
      display: block;
    }
    [type="number"],
    [type="date"],
    [type="name"] {
      display: block;
    }
  }
}

Что касается скомпилированного вывода, то, что SCSS будет делать и с вашим кодом:

.foo__form input {
  display: block;
}

.foo__form [type="number"],
.foo__form [type="date"],
.foo__form [type="name"] {
  display: block;
}