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

【问题标题】：How to implement this sticky footer in a modular way in sass?如何在 sass 中以模块化方式实现这个粘性页脚？
【发布时间】：2013-10-10 20:54:42
【问题描述】：

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

footer {@extend %sticky-footer;}

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

明确一点：我不是要父选择器。我正在寻求一种模块化的方式来使用 scss 实现此页脚。

【问题讨论】：

相关：stackoverflow.com/questions/16285561/… 和 stackoverflow.com/questions/1014861/…
@cimmanon 我不认为这些是相关的。我不是要一个父选择器（引用：Scss 没有某种我可以使用的父选择器，据我所知。）。检查我对您的回答的评论。

标签： html css sass

【解决方案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;
}

【讨论】：

你误会我了。这并不是说我要一个父选择器，我知道目前还不可能。我要求的是一种向 html、正文和页脚添加样式的自包含（模块化）方式。 mixin 肯定会做到这一点，但我想知道 @extend 是否可以做到这一点。
没有充分的理由使用扩展。扩展仅适用于您要扩展的元素，您必须在每个应具有所需样式的选择器中使用扩展。 Extend 也使得重用变得很痛苦，因为你不能传递变量。扩展也可能效率低下（请参阅：codereview.stackexchange.com/a/27910）
好的，所以用扩展来做到这一点的唯一方法是制作一个基本上应用于html标签的方法。顺便提一句。我不担心传递变量，因为我只会使用一个粘性页脚，而且效率也不是问题，因为它是一个非常小的网站。
我想当我只在一个地方使用它时，也没有必要抽象这样一个类。无论如何，感谢您的帮助！