Question

我正在使用James Dean of sticky footers。它需要将样式应用于<html>，<body>和<footer>。现在我正在使用sass来编写我的CSS，并且我希望尽可能将这个页脚实现为模块化。例如，优选像这样：

footer {@extend %sticky-footer;}

但是，如果我这样做，我仍然需要设置<html>和<body>标签的样式。就我所知，Scss没有某种父选择器。那么有没有办法以模块化的方式用sass（scss）来完成这个，最好用@extend？（有example on codepen）

要明确：我不是要求父选择器。我要求用scss实现这个页脚的模块化方法。

Answer 1

这是不可能的。 Sass严格来说是一种编译成CSS的语言，它不了解DOM并且不对你的标记做任何假设。你要求的必须是CSS的功能才能使其发挥作用。

CSS中有一个父选择器，但目前在任何浏览器中都不支持。

你能得到的最接近的是：

html%sticky-footer {
    position: relative;
}

body%sticky-footer {
    margin: 0 0 100px 0;
}

footer%sticky-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

html, body, footer {
    @extend %sticky-footer;
}

如何在sass中以模块化方式实现这个粘性页脚？

1 个答案: