Sass：扩展嵌套选择器

Question

（我想我应该提一下，我只是最近才开始使用Sass / SCSS）

http://jsfiddle.net/DriftingSteps/t6kLncfm/

您可以看到<strong>如何继承全局<a>的属性以及嵌套的<a>标记的属性。

a {
    color: #09f;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
        opacity: 0.6;
    }
}

ul {
    font-size: 0.85em;
    a {
        font-family: Georgia, Times, serif;
        font-style: italic;
        color: #0a3;
    }
    strong {
        @extend a;
    }
}

我一直在浏览http://sass-lang.com/ ，我知道我缺少一些东西。 我究竟做错了什么？ 有没有一种方法可以仅从嵌套<a>继承属性，而无需在ul a和ul strong上使用类？ 还是有更好的方法来做到这一点？

Answer 1

您可以使用仅扩展选择器 （ % ），然后从其中扩展ul a和ul strong ：

a {
    color: #09f;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
        opacity: 0.6;
    }
}

ul {
    font-size: 0.85em;
    a {
      @extend %a;
    }
    strong {
        @extend %a;
    }
}

%a {
    font-family: Georgia, Times, serif;
    font-style: italic;
    color: #0a3;
}

Answer 2

您不必使用该类，也不必将其应用于HTML，您可以定义它并在继承时引用它：

a, .a {
    font-family: Georgia, Times, serif;
    font-style: italic;
    color: #0a3;
}
strong {
    @extend .a;
}

示范

当然，在这种情况下，您实际上不需要扩展：

a, strong {
    font-family: Georgia, Times, serif;
    font-style: italic;
    color: #0a3;
}
strong {
    // other stuff
}

在我看来，扩展的真正用例不是一起定义的深度本地化选择器，而是在其他地方定义的选择器的扩展。