Question

就在我认为Sass是自切片面包以来最酷的东西时，它必须让我失望。我试图使用＆符来选择嵌套项的父级。这是一个复杂的选择，它会带来一些意想不到的结果......

我的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;
}

演示： http://sassmeister.com/gist/8ed68bbe811bc9526f15

Answer 1

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

采取以下类似BEM的SASS：

Staging

Production内的选择器将是.content-block { &__heading { font-size: 2em; } &__body { font-size: 1em; } &--featured { &__heading { font-size: 4em; font-weight: bold; } } }，这可能不是您所追求的。

它不像单个＆符号那样优雅，但你可以将父选择器存储到一个变量中！所以要从上面的例子中得到你可能想要的东西而不用硬编码父选择器： / p>

.content-block--featured

所以，OP，在你的情况下，你可能会尝试这样的事情：

.content-block--featured .content-block--featured__heading

Answer 2

这是正常行为，如Sass文档（link）中所述：

＆安培;将替换为CSS 中显示的父选择器。这意味着如果您有一个深层嵌套的规则，父选择器将在＆amp;之前完全解析。被替换了。

含义：

.foo { .bar { .baz & { color: red; } } }

将呈现为：

.baz .foo .bar { color: red; }

不：

.baz .bar { color: red; }

获得预期结果的正确方法是：

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

Sass使用嵌套选择器中的＆符号引用父选择器

2 个答案:

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