1

我最近更新到 SingularityGS 1.4.0 并且在使用现在包含一个属性 .container的类时遇到了问题。@include clearfix;overflow:hidden

对于幻灯片组件，我使用负/正边距来显示与外部箭头重叠的箭头.container：

.container {  //Container for the grid system 
    background: $background-color;        
    max-width: $site-width;
    margin: 0 auto;
    position: relative;
    @include clearfix;
    @include breakpoint($large-break) {
        border-left: 20px solid #fff;
        border-right: 20px solid #fff; 
        width: $site-width; 
    }

    .container {
        border: 0px;
        margin: 0px;
        clear: both;
    }
}


    .left-arrow, .right-arrow {
        position: absolute;
        cursor: pointer;
        margin-top: -20px;
        font-size: 0.8em;
        width: 41px;
        height: 41px;
        top: 50%;
    }
    .left-arrow {
        left: -10px;
        background: url(/images/icons.png) no-repeat -153px -146px;
    }
    .right-arrow {
        right: -10px;
        background: url(/images/icons.png) no-repeat -197px -146px;
    }

这是问题的屏幕截图：

https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0

我应该在容器中使用 clearfix mixin 以外的东西吗？

编辑： -根据要求添加了 Sassmeister 问题

4

2 回答 2

1

这个版本的 Singularity 使用 Compass clearfix。您可以根据需要编写自己的工作：

@mixin clearfix {
    &:after {
        content: '';
        display: table;
    }
}

见：http ://sassmeister.com/gist/099ef72b56365fe8ce07

于 2014-09-03T21:52:13.623 回答
0

Singularity 没有自己的 clearfix mixin。

您正在使用clearfixCompass 中的 mixin，它利用了overflow: hidden反过来裁剪您的容器的技术。

解决方案是使用另一个 mixin 进行 clearfixing。

Compass 捆绑了三种不同的 clearfix mixin，其中最有用的是pie-clearfix. 它的输出如下：

.foo {
  *zoom: 1;
}
.foo:after {
  content: "";
  display: table;
  clear: both;
}

我建议您使用Team Sass 与漂亮的工具包Sass 扩展clearfix捆绑在一起的 mixin 。

它具有以下优点pie-clearfix：

  1. 适用于所有现代浏览器的较短输出：

    .foo:after {
  content: "";
  display: table;
  clear: both;
}

  2. 两种应用方式：传统的mixin方式（默认）和extend方式。扩展方式通过重复数据删除使您的 CSS 占用空间更小。扩展方式的缺点是无法从媒体查询中应用它，尽管我从未遇到过您只需要在媒体查询中使用 clearfix 并且不需要在媒体查询之外应用它的情况。

    要将 Toolkit 配置为使用扩展方式，请在 CSS 的开头应用此方法：

    @include toolkit-set('clearfix extend', false);

    要覆盖当前设置，请使用以下命令：

    @include clearfix(true);

    true表示extend方法，false表示mixin方法。

请注意，如果您同时包含 Compass 和 Toolkit，则 Toolkit 应位于 Compass 之后以覆盖clearfixmixin。

如果您觉得 Toolkit 对于您的项目来说过于庞大，只需clearfix在导入 Compass 后定义自己的 mixin，就像 Scott建议的那样。只要确保使用正确的 clearfix 方法，Scott 的代码（截至 2014-09-04 12:00 UTC）实际上并没有 clearfix。

于 2014-09-04T12:48:51.980 回答