SASS mixin с переменной в качестве селектора - PullRequest
Новая
       7

SASS mixin с переменной в качестве селектора

0 голосов
/ 28 июня 2018

Моя цель - стилизовать несколько типов ввода, которые требуют много кода. Большинство из них используется повторно, когда вы также объявляете, что входы различных состояний имеют.

Есть ли метод с SASS, в котором вы можете передать переменную "состояния" в миксин, а затем использовать этот миксин в качестве селектора?

Вот мой (нерабочий) код, который я вставил в https://www.sassmeister.com для проверки. 

@mixin inputs($state) {
  input[type="text"]$state;
  input[type="email"]$state;
  input[type="url"]$state;
  input[type="search"]$state;
  input[type="date"]$state;
  input[type="time"]$state;
  /* etc */
}

@include inputs() {
  border:2px solid #ccc;
}

@include inputs(:hover) {
   border:2px solid #000;
}

@include inputs(:focus) {
   border:2px solid blue;
}

@include inputs(:active) {
   border:2px solid red
}

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Вы неправильно используете миксины, как указано в документации sass, миксины должны содержать объявления.

Некоторые вещи в CSS писать немного утомительно, особенно с CSS3 и многие существующие префиксы поставщиков. Mixin позволяет создавать группы CSS-объявлений, которые вы хотите использовать на своем сайте. Вы может даже передавать значения, чтобы сделать ваш миксин более гибким Хорошее использование из миксина для префиксов вендора. Вот пример для преобразования.

Таким образом, наличие mixins, не имеющих значения для их свойства, приведет к ошибке.

Если вы вернете логику, она будет работать. Вы также можете добавить больше переменных в мой пример, скажем, для размера или типа границы. 

@mixin inputBorder($color) {
  border: 2px solid $color;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"] {
  @include inputBorder(#ccc);

  &:hover {
   @include inputBorder(#000);
  }

  &:focus {
   @include inputBorder(blue);
  } 

  &:active {
   @include inputBorder(red);
  }
}

Вы также можете использовать пример @josephWebber, если хотите изменить только цвет границы.

0 голосов
/ 28 июня 2018

Вы можете сделать это без миксина, используя sass ampersand . 

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"] {
  border:2px solid #ccc;
  &:hover {
    border:2px solid #000;
  }
  &:focus {
    border:2px solid blue;
  }
  &:active {
    border:2px solid red;
  }
}
...