如何理解Less/SCSS中的&-sign？

Question

我正在尝试了解 Less 中的 & 登录。根据 lesscss.org，& 表示当前选择器父级。那么在下面的例子中它是什么意思呢？容器 class 的 css 很明显。但是 &-footer、.CancelButton 和 &-thresholds 适用于什么？

.container {
  display: flex;
  margin: 8px 0 8px 0;
  line-height: 32px;

  &-footer {
    display: flex;
    margin: 24px 0 8px 8px;
    height: 32px;
    justify-content: flex-end;

    .CancelButton {
      margin: 0;
    }
  }

  &-thresholds {
    margin: 24px 0;
  }
}

Answer 1

您应该考虑将 & 符号简单地替换为当前的父选择器。

这意味着：

.container {

    &-white {
        background: white;
    }
}

变成

.container-white {
    background: white;
}

或：

.container {
    display: flex;
    &:after {
         content: ' ';
         background: black;
    }
}

变为：

 .container {
      display: flex;
 }
 .container:after {
      contente: ' ';
      background: black;
 }

编辑：关于你的例子：

.container {
    display: flex;

    &-footer {
        display: flex;
        margin: 24px 0 8px 8px;

        .CancelButton {
            margin: 0;
        }
    }
 }

CancelButton 上的边距 class 仅在出现类似以下内容时才会应用：

<div class="container-footer">
    <button class="CancelButton" />
</div>

（请考虑不要将 CamelCase 用于 css！另请查看 BEM 命名约定）

如何理解Less/SCSS中的&-sign？

How to understand the &-sign in Less/SCSS?

css

less

scss-mixins