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

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:

.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;
                }
            }
        }
    }
}

Answer 2

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

& 将被替换为 CSS 中显示的父选择器。这意味着，如果您有深度嵌套的规则，则在替换 & 之前将完全解析父选择器。

意义：

.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;
    }
  }
}