0

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Working with Susy 2 Grid Layouts</title>
        <link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

    </head>
    <body>

        <div class="notice"><h3>Susy is GREAT.. But really..!</h3></div>
        <div class="container">
            <div class="one"><strong>1</strong><br />
                @include span(8)<br />
                @include prefix(1) <em>//padding</em><br />

            </div>

            <div class="buttons">
                <a href="#" class="pure-button">A Pure Button</a>
            </div>
            <div class="notice">this is some notice</div>
        </div>
    </body>
</html>

应用程序.scss

@import 'susy';

$susy: (
    flow: ltr,
    output: float,
    math: fluid,
    column-width: false,
    container: 1140px,
    last-flow: to,
    columns: 12,
    gutters: 1/8,
    gutter-position: after,
    global-box-sizing: border-box,

    debug: (
        image: show,
        color: rgba(green, .25),
        output: background,
        toggle: top right
    ),
);

@include global-box-sizing(border-box);

img {
    width: 100%;
    height: auto;
}

.notice {
    @include full;
    background-color: yellow;
}

.notice {
    padding: 5px 8px;
}

.container {
    @include container;
    font-size: small;
}

em {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

.one {
    @include span(8); // can be narrow(default), wide & wider
    @include prefix(1);

    height: 200px;
    background-color: blue;
    color: white;
}

.buttons {
    @include span(1 at 2 fluid isolate); // shouln't this be 1 at 10 as it is still in context of 12???
}

不应该跨越isolate模式的简写，指定第 10 列而不是 2，因为我仍然处于 12 列的上下文中，前 8 列被 .onediv 占用？Susy 中的其他一切都符合逻辑，我没有任何问题，但这个让我失望。

但是，如果我指定：

.buttons {
    @include break; // which does clear:both on this element
    @include span(1 at 10 fluid isolate);
}

，那么我必须告诉它在第 10 列。这应该像这样工作吗？

4

1 回答 1

1

因为Susy 不知道 DOM，所以所有的定位都是相对于默认流的。如果给定上下文中的所有内容都是隔离的，那么隔离可以解决这个问题——因为这会将所有内容都拉出水平流。但是，当您仅隔离一个元素时，它会将自己定位在左侧的其他元素上。

于 2014-09-24T04:55:29.340 回答