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

您不必使用那个 class 也不必将它应用到您的 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 的真正用例不是一起定义的深度本地化选择器，而是其他地方定义的选择器的扩展。

Answer 2

您可以使用 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;
}

Sass: 扩展嵌套选择器

Sass: Extending nested selectors

css

sass