Susy Multiple Responsive Mixin失败
这将把我送进一个提早的坟墓，提前感谢你把我拉出来的帮助。
小故事:列表元素上的多个at-breakpoints在从平板电脑网格到桌面网格时失败，但在从移动网格到平板电脑时工作得很好。
从移动优先的方法btw开始。
这是加价：
<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列网格的中断。甜!
什么地方出问题了？当脱离tablet网格时，第二个list元素保留了它的omega(2n)，尽管它已经移到了不需要它的桌面，因此破坏了所需的5列显示。
直接从Firebug：#members-frontpage .member:nth-child(2n)中摘录出来，列在列表的第二位。不想让它出现在那里。希望这是有意义的。
.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-frontpageHacky的解决方案是将.member element在不同手机和平板电脑之间的破损从父母的.scss巢中移除。
回答 1
Stack Overflow用户
发布于 2013-02-27 06:53:02
是的，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;
}你只需要其中之一。longer方法的唯一优点是，如果您出于任何原因需要它，您可以获得更多的控制。但在最简单的情况下，输出是相同的。
https://stackoverflow.com/questions/15092747
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号