【问题标题】：SASS append margin to body only if child class exists仅当子类存在时，SASS 才将边距附加到正文
【发布时间】：2017-03-03 16:23:02
【问题描述】：

我有以下内容 - 现在我只希望在元素具有粘性类的情况下应用主体 - 只是现在因为 @at-root 主体边距始终处于活动状态 - 但我也需要它才能使其在原地工作这个嵌套。

// Sticky
// @todo The body margin is always present even if not sticky
//------------------------------------------------------------------------//
&--sticky {

    @at-root  {

        body {
            margin-bottom : 260px;
        }

        footer#{ & } {
            position         : absolute;
            bottom           : 0;
            width            : 100%;
            height           : 260px;
            background-color : #f5f5f5;
        }

    }

}

HTML 使用上面的 CSS，总是应用正文边距 - 它不应该是

<footer> 
   blah
<footer>

选项是

With the above CSS the body margin is applied and the footer postion

<footer class="footer--sticky"> 
   blah
<footer>

我想要一个解决方法，如果粘性类不存在，那么嵌套的 css 将不会运行

任何帮助表示赞赏

【问题讨论】：

你期望什么 CSS 代码？您的 HTML 看起来如何？
更新了一点 - 这有帮助 - 哈哈，有人已经在没有评论的情况下投了反对票 - 有点苛刻:)

标签： css sass

【解决方案1】：

尝试在没有 SASS 的情况下解决您的问题。

Sass 编译为纯 CSS。它不能做任何 CSS 做不到的事情。如果你不能用 css 解决你的问题，它可能是不可解决的。

访问父母

您正在尝试使用 & 来获取父级。我认为这不是它的工作方式。您正在寻找 CSS 中不存在的父选择器 (https://css-tricks.com/parent-selectors-in-css/)。

解决方案

可能的解决方案是将 CSS-Class 赋予body。例如。 <body class="sticky-footer-is-active">

我现在很难解决你的问题 ;-)

您已经需要 Javascript 来从页脚添加/删除类。所以你可以使用它。

未来

http://html5please.com/#sticky

【讨论】：

谢谢，是的，在没有我阅读的情况下，看看 SASS CSS 是否已经进入了另一个层次，真的是在黑暗中刺伤。