SCSS Mixin 附加 ::before 样式 [重复]答案

【问题标题】：SCSS Mixin append ::before styling [duplicate]SCSS Mixin 附加 ::before 样式 [重复]
【发布时间】：2015-09-21 18:50:54
【问题描述】：

@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 之间添加一个空格，这会导致它们不会以预期的方式相互关联。删除此空间后，元素的行为将按预期进行。

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

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

【问题讨论】：

哦，伙计@Nit，回答有点晚了。在 Oriol 之后。
这是重复的，但由于其标题，我找不到该问题，而且问题和答案也没有那么严格。通常越短越好。

标签： css sass mixins

【解决方案1】：

使用&：

Referencing Parent Selectors: &

有时在其他规则中使用嵌套规则的父选择器很有用方式比默认方式。 [...] 在这些情况下，您可以明确地使用& 指定应插入父选择器的位置字符。

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

【讨论】：

【解决方案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;
}

【讨论】：