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');
}

SASS：根据页面类定位后代的正确方法

1 个答案: