Susy 多响应 Mixin 失败答案

【问题标题】：Susy Multiple Responsive Mixin FailingSusy 多响应 Mixin 失败
【发布时间】：2013-02-26 15:19:55
【问题描述】：

这个人会把我送进一个早期的坟墓，在此先感谢您将我拉出来的任何帮助。

简短的故事：从平板电脑网格切换到桌面网格时，列表元素上的多个 at-breakpoints 失败，但从移动网格切换到平板电脑时效果很好。

顺便说一句，从移动优先的方法开始。

这是标记：

<html>
    .
    .
    .
    <div id="container">
        <div id="content">
            <article class="page">
                <ul id="members-frontpage">
                    <li class="member">
                    .
                    .
                    .
                    </li>
                </ul>
            </article>
        </div>
    </div>
    .
    .
    .
<html>

基本的 Susy 配置：

@include border-box-sizing;

//Mobile First config
$total-columns  : 4;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$show-grid-backgrounds  : true;

$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;

//Breaks
$break-to-medium: 30em 12; //break from phone to tablet
$break-to-large: 65em 25; //break from tablet to desktop

基本布局：

#container {
    min-height: 100%;
    height: 100%;
    @include container($total-columns, $break-to-medium, $break-to-large);
    @include at-breakpoint($break-to-medium) {
        @include set-container-width;
    }
    @include at-breakpoint($break-to-large) {
        @include set-container-width;
    }
}

最后是当前失败的代码：

什么有效？使用at-breakpoint 从移动 4 列网格到平板电脑 12 列网格的中断。甜！

什么失败了？当从具有omega(2n) 的平板电脑网格中断开以获取.member list items 的两列显示时，第二个列表元素保持为omega(2n)，尽管它已移动到不需要它的桌面，因此打破了所需的 5 列显示。

从 Firebug 中提取：#members-frontpage .member:nth-child(2n) 用于 #2 列表项。不希望它在那里。希望这是有道理的。

.page {
    padding: 0 $grid-padding;
    @include at-breakpoint($break-to-medium) {
        @include susy-grid-background;
    }
    @include at-breakpoint($break-to-large) {
        @include susy-grid-background;
        padding: rhythm(1,16px) 0;
        @include squish(2,2);
    }
}

#members-frontpage { //ul
    @include clearfix;
    list-style: none;
    margin: 0;
    padding: rhythm(1,16px) 0 0 0;
    text-align: center;

    .member {  //li
        position: relative;
        min-height: 15em;
        margin: 0 0 rhythm(2,16px) 0;
        border-radius: .75em;
        border: .1em solid rgba($green, .4);
        background: rgba(255,255,255,.4);

        //Here We Go
        @include at-breakpoint($break-to-medium) {
            @include span-columns(6,12);
            @include nth-omega(2n);
    }
        @include at-breakpoint($break-to-large) {
            @include span-columns(5,25);
            @include nth-omega(5n);
        }

    } //end .member

    .member-title {
        @include rhythm(0,.25,.25,0,16px);
        border-top-left-radius: .75em;
        border-top-right-radius: .75em;
        border-bottom: .1em solid rgba($green, .4);
        background: lighten($yellow, 34%);
    }
    .member-logo {
        @include rhythm(0,1,1,0,16px);
        max-width: 96%;
        height: 100% !important;
    }
    .member-content {
        position: absolute;
        width: 100%;
        bottom: 0;
        @include rhythm(0,0,1,0,16px);
        font-weight: bold;
    }

} // end #member-frontpage

Hacky 解决方案是将.member element 从手机到平板电脑的中断从父级的 .scss 巢中删除。

【问题讨论】：

标签： susy-compass

【解决方案1】：

是的，Susy 无法假设您想要在断点之间传递什么，以及您不想传递什么。您必须明确，但 Susy 为您提供了两种选择。一个基本上是你已经在做的，但是用漂亮的 Susy 语法编写：

@include at-breakpoint($break-to-large) {
  @include span-columns(5,25);
  @include remove-nth-omega(2n); // remove the old one
  @include nth-omega(5n);  // set the new one
}

另一种选择是更紧密地限定您的媒体媒体查询：

$break-medium-only: 30em 12 65em; // min and max width settings

如果您使用具有最小和最大设置的断点，则该断点的内容不会延续到您的 large 样式中。

无关：您还可以简化容器设置。现在你正在复制自己。

@include container($total-columns, $break-to-medium, $break-to-large);

和

一样

@include container;
@include at-breakpoint($break-to-medium) {
  @include set-container-width;
}
@include at-breakpoint($break-to-large) {
  @include set-container-width;
}

你只需要一个或另一个。更长的方法的唯一优点是，如果您出于任何原因需要它，您可以获得更多控制权。但在最简单的情况下，输出是相同的。

【讨论】：

一个广泛的问题总是会导致一个简单的答案:)。解决了！选择选项 2，看起来更优雅。非常感谢埃里克。
在这种情况下，选项 2 肯定更优雅。当您想要添加会影响中型和大屏幕的样式时，它会失败。我倾向于使用较小的组件变量来构建断点，因此我可以根据需要混合和匹配。