html - 如何在Sass中以模块化方式实现此粘性页脚？

我正在使用James Dean of sticky footers。它要求将样式应用于<html>，<body>和<footer>。现在，我使用sass来编写我的css，我想将此页脚尽可能地模块化。最好像这样：

footer {@extend %sticky-footer;}

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

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

最佳答案

这是不可能的。 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;
}

关于html - 如何在Sass中以模块化方式实现此粘性页脚？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19294278/