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

您可以使用extend-only selector（%），并从中扩展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;
}

Demonstration

当然，在这种情况下，你真的不需要扩展：

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

在我看来，extend的真实用例不是一起定义的深度本地化选择器，而是在别处定义的选择器的扩展。