SCSS Mixin append ::before 样式

Question

@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 */
  }

由于 mixins 工作方式的性质，它在 item 和 ::before 之间添加了一个 space，这导致它们不会以预期的方式相互关联.删除此 space 后，元素将按预期运行。

我将如何使用相同或相似的方法来实现以下输出？

.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 等等...

Answer 1

使用&:

Referencing Parent Selectors: &

Sometimes it’s useful to use a nested rule’s parent selector in other ways than the default. [...] In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

@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 */
  }
}

Answer 2

您正在寻找与号：

@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 Mixin append ::before 样式

SCSS Mixin append ::before styling

css

sass

mixins