sass - SASS：基于页面类定位后代的正确方法

Question

这个让我卡住了。

我想根据正文类向#page-title 添加背景图像。

我很懒惰地编译成：

body.front #page-title {
background-image: url('front.png');
}

body.blog #page-title {
background-image: url('blog.png');
}

显然，真正的代码更复杂（实际代码将包含背景位置而不是独特的图像），但你明白了。树中的每个元素都已经具有重要的样式。

实现这一目标的最佳方法是什么？

非常感谢！

编辑：好吧，我找到了一个可行的解决方案：

body {
/* body attributes */

#page-title { 
/* #page-title attributes */
}

 &.front #page-title {
 /* body.front #page-title attributes */
 }

 &.blog #page-title {
 /* body.blog #page-title attributes */
 }
}

这可以正确呈现，但是在每个页面类之后重新输入#page-title 感觉不对。不知何故，我想知道我是否不屈服于 sass 方式，但在我有更好的解决方案（@import？）之前，这是可行的。

谢谢！

Answer 1

在编写 SASS 之前，我会简化 CSS。

假设 .blog 和 .front 是您用于 body 的唯一类，那么您的类就太多了。为什么不设置一个默认类（.blog），然后为 .front 添加一个选择器？

body #page-title {
    background-image: url('blog.png');
}

body.front #page-title {
    background-image: url('front.png');
}

或者，您可以设置默认值，然后将类添加到#page-title 元素。

#page-title {
    background-image: url('blog.png');
}

#page-title.front {
    background-image: url('front.png');
}