仅当子类存在时,SASS才会向主体附加保证金

时间:2017-03-02 22:54:48

标签: css sass

我有以下内容 - 现在我只希望在元素具有粘性类时应用正文 - 仅现在因为@ 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就会运行

任何帮助表示赞赏

1 个答案:

答案 0 :(得分:0)

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

Sass编译为纯CSS。它无法做任何CSS无法做到的事情。 如果您无法在css中解决问题,则可能无法解决问题。

访问父母

你正试图用&amp;到达父母。 我认为这不是它的工作原理。 您正在寻找CSS中不存在的父选择器(https://css-tricks.com/parent-selectors-in-css/)。

解决方案

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

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

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

未来

http://html5please.com/#sticky