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
}

在我看來，擴展的真正用例不是一起定義的深度本地化選擇器，而是在其他地方定義的選擇器的擴展。