css - SCSS 目标直接父级

Question

我正在尝试整理以下 scss 代码。

$colors-2: #222;
$colors-1: #ff0;

.footer__region {
  text-align: center;

  &--country {
    color: $colors-2;
    cursor: pointer;
    display: inline-block;

    .heading-3 {
      border-bottom: 2px solid transparent;

      .active & {
        border-bottom-color: $colors-1;
        color: $colors-1;
      }
    }
  }
}

我以为我可以把.active嵌套在里面然后加上&之后输出下面的内容

.footer__region--country.active .heading-3 {
  border-bottom-color: #ff0;
  color: #ff0;
}

但我好像做不到。有谁知道任何 Sass 方法可以做到这一点？

注意:.footer__region--country 将是附加有 .active 的元素，.heading-3 将是 child 。

Answer 1

幸运的是，对于您的示例，您可以使用 @at-root指令以及 .a.b{} 选择与 .b.a{} 相同的事实。这样您就不必重复任何类名。

$colors-2: #222;
$colors-1: #ff0;

.footer__region {
  text-align: center;

  &--country {
    color: $colors-2;
    cursor: pointer;
    display: inline-block;

    .heading-3 {
      border-bottom: 2px solid transparent;

      @at-root .active#{&} {
        border-bottom-color: $colors-1;
        color: $colors-1;
      }
    }
  }
}

输出:

.footer__region {
  text-align: center;
}
.footer__region--country {
  color: #222;
  cursor: pointer;
  display: inline-block;
}
.footer__region--country .heading-3 {
  border-bottom: 2px solid transparent;
}
.active.footer__region--country .heading-3 {
  border-bottom-color: #ff0;
  color: #ff0;
}