Sass 在嵌套选择器中使用 & 符号引用父选择器

正当我认为 Sass 是自切片面包以来最酷的东西时，它不得不消失并让我失望。我正在尝试使用 & 符号来选择嵌套项目的父项。这是一个复杂的选择，它返回了一些意想不到的结果......

My sass:

.page--about-us {
  a {
    text-decoration:none;
  }
  .fa-stack {
    .fa {
      color:pink;
    }
    a & {
      &:hover {
        .fa-circle-thin {
          color:red;
        }
        .fa-twitter {
          color:blue;
        }
      }
    }
  }
}

输出的CSS：

.page--about-us a {
  text-decoration: none;
}
.page--about-us .fa-stack .fa {
  color: pink;
}
a .page--about-us .fa-stack:hover .fa-circle-thin {
  color: red;
}
a .page--about-us .fa-stack:hover .fa-twitter {
  color: blue;
}

预期输出（注意 a 标签的位置）：

.page--about-us a {
  text-decoration: none;
}
.page--about-us .fa-stack .fa {
  color: pink;
}
.page--about-us a .fa-stack:hover .fa-circle-thin {
  color: red;
}
.page--about-us a .fa-stack:hover .fa-twitter {
  color: blue;
}

Demo: http://sassmeister.com/gist/8ed68bbe811bc9526f15 http://sassmeister.com/gist/8ed68bbe811bc9526f15

您可以将父选择器存储在变量中！

采用以下类似 BEM 的 SASS：

.content-block {
    &__heading {
        font-size: 2em;
    }

    &__body {
        font-size: 1em;
    }

    &--featured {
        &__heading {
            font-size: 4em;
            font-weight: bold;
        }
    }
}

里面的选择器.content-block--featured将是.content-block--featured .content-block--featured__heading这可能不是你想要的。

它不像单个 & 符号那么优雅，但您可以将父选择器存储到变量中！因此，要从上面的示例中获得您可能想要的内容，而无需对父选择器进行硬编码：

.content-block {
    $p: &; // store parent selector for nested use

    &__heading {
        font-size: 2em;
    }

    &__body {
        font-size: 1em;
    }

    &--featured {
        #{$p}__heading {
            font-size: 4em;
            font-weight: bold;
        }
    }
}

所以，OP，根据你的情况，你可以尝试这样的事情：

.page--about-us {
    $about: &; // store about us selector

    a {
        text-decoration:none;
    }

    .fa-stack {
        .fa {
            color:pink;
        }

        #{$about} a & {
            &:hover {
                .fa-circle-thin {
                    color:red;
                }
                .fa-twitter {
                    color:blue;
                }
            }
        }
    }
}