SASS:基于页面类的目标子代的正确方法

Question

这把我卡住了。

我想在基于body类的#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');
}