试图弄清楚Susy和我在按位置定位元素时遇到了问题。'first和last按预期工作,但使用特定列的编号则不然。我哪里错了?
.number {
@include span(4 at 5);
}
请参阅演示:http://sassmeister.com/gist/aad8a46d927b59573695
或完整代码:
@import "susy";
$susy: (
flow: ltr, // ltr | rtl
output: float, // float | isolate
math: fluid, // fluid | static (requires column-width)
column-width: false, // false | value
container: 800px, // length or % | auto
container-position: center, // left | center | right | <length> [*2] (grid padding)
last-flow: to,
columns: 12,
gutters: .75,
gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
debug: (
image: show,
color: rgba(#66f, .25),
output: background, // background | overlay
toggle: top right,
),
use-custom: (
background-image: true, // look for background-image mixin
background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
box-sizing: true, // look for custom bix sizing mixin
clearfix: false, // true = look for internal clearfix before using micro clearfix
rem: true, // look for rem mixin
)
);
.page {
@include container;
}
.row {
@include full;
}
.first {
@include span(4);
background-color:pink;
}
.last {
@include span(last 4);
background-color:orange;
}
.number {
@include span(4 at 5);
background-color: wheat;
}
<div class="page">
<div class="row">
<div class="first">hooray I'm first</div>
<div class="last">hooray I'm last</div>
</div>
<div class="row">
<div class="number">boo I'm not at my specific location</div>
</div>
</div>
刚刚意识到我的错误(以防其他人需要它):"at"关键字仅适用于隔离输出,并且我的网格设置为浮动。若要修复此问题,可以将float更改为在整体设置中隔离,也可以将其直接应用于有问题的元素。
.number {
@include span(isolate 4 at 5);
}
http://sassmeister.com/gist/42d1efaf1ddd9c721379