Добавление SCSS Mixin :: перед стилем

@mixin item {
  /* Element Styling */
  ::before {
    /* Element ::Before Styling */
  }
  :hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }
}

.item {
  @include item;
}

Этот пример SCSS производит следующее в CSS

.item {
   /* Element Styling */
 }
  item ::before {
    /* Element ::Before Styling */
  }
  item :hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }

Из-за особенностей работы примесей он добавляет пробел между item и ::before, из-за чего они не связаны друг с другом ожидаемым образом. Когда это пространство удалено, элемент ведет себя так, как ожидалось.

Как мне использовать тот же или аналогичный метод для достижения следующего результата?

.item {
   /* Element Styling */
 }
  item::before {
    /* Element ::Before Styling */
  }
  item:hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }

Если вы не можете сказать, в чем разница, item ::before теперь item::before и так далее...


css sass mixins
person b2550    schedule 03.07.2015    source источник
comment
О, чувак @Nit, слишком поздно отвечать. Сразу после Орола.   -  person b2550    schedule 04.07.2015
comment
Это дубликат, но я не смог найти этот вопрос из-за его названия, а вопрос и ответ не так просты. Как правило, чем короче, тем лучше.   -  person b2550    schedule 04.07.2015

Ответы (2)


arrow_upward
1
arrow_downward

Используйте &:

Ссылка на родительские селекторы: &

Иногда бывает полезно использовать родительский селектор вложенного правила не по умолчанию. [...] В этих случаях вы можете явно указать, где должен быть вставлен родительский селектор, используя символ &.

@mixin item {
  /* Element Styling */
  &::before {
    /* Element ::Before Styling */
  }
  &:hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }
}
person Oriol    schedule 03.07.2015

arrow_upward
1
arrow_downward

Вы ищете амперсанд:

@mixin item {
  /* Element Styling */
  &::before {
    /* Element ::Before Styling */
  }
  &:hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }
}

.item {
  @include item;
}
person Etheryte    schedule 03.07.2015