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

Posted 2023-03-06

【中文标题】SCSS Mixin 附加 ::before 样式 [重复]

【英文标题】：SCSS Mixin append ::before styling [duplicate]

【发布时间】：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 之后。

这是重复的，但由于其标题，我找不到该问题，而且问题和答案也没有那么严格。通常越短越好。

【参考方案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;