&的正确用法。在 SCSS 中答案

【问题标题】：Correct usage of &. in SCSS&的正确用法。在 SCSS 中
【发布时间】：2022-11-10 18:35:22
【问题描述】：

&的正确用法是什么？在 SCSS

在 SCSS 文件中，使用 & 有什么区别？代替。

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

【问题讨论】：

标签： css sass

【解决方案1】：

& 将把它后面的任何东西加入到父类中。

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

但是 .loading 类将评估为 .text-field .loading - 因此加载类的元素具有 text-field 类的父元素。

您也可以使用 & 而不使用 .，例如：

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

将评估为单个 text-field--loading 类。

【讨论】：

【解决方案2】：

如果你使用

&.error

css 编译为：

.text-field.error

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

.text-field .loading

这意味着在第一个示例中，您期望在同一个“父”dom 元素上出现错误类，而在后者中，您期望内部有一个子级，该子级应该具有loading 类。

因此，没有正确的用法，这是您想要实现的目标的问题。

【讨论】：

【解决方案3】：

上面的答案很好，但有限。

使用可以是其他方式。

考虑使用 & 符来限定上下文，如下所示：

.child {
    .parent &{
    }
}
// gives .parent .child

这也可以多次使用，虽然不是很少有帮助和可读性，但它仍然有效：

.child {
    & &{
    }
}
// gives .child .child

但是可以使用列表变得很好：

.a,.b{
    & + &{
    }
}
// gives .a + .a, .a + .b, .b + .a, .b + .b

【讨论】：