正确使用&。在 SCSS 中

Question

& 的正确用法是什么。在 SCSS 中

在 SCSS 文件中，使用 & 有什么区别？而不是 .

.text-field {
  .loading {
    -----
  }
  
  &.error {
    ------
  }
}

Answer 1

如果你使用

&.error

css编译为：

.text-field.error

而如果您不使用 &（如在您的加载示例中），则编译结果为：

.text-field .loading

这意味着在第一个示例中，您期望在同一个 'parent' dom 元素上出现错误 class，而在后者中，您期望其中的子元素应该有 class loading.

所以，没有正确的用法，看你想达到什么效果。

Answer 2

& 会将它后面的任何内容加入父级 class。

在您的示例中，这意味着 &.error 将评估为 .text-field.error - 将应用于具有 text-field 和 error [=32] 的任何元素的样式=]es.

.loading class 然而将计算为 .text-field .loading - 因此具有加载 class 的元素具有具有 text-field class.

您也可以在没有 . 的情况下使用 &，例如：

.text-field {
  &--loading {
    // styles
  }
}

将计算为单个 text-field--loading class.

Correct usage of &. in SCSS