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

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

.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: &

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

@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在样式之前附加::

2 个答案: