Question

的index.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>

app.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???
}

不应该以{{1}}模式跨越速记，而是指定第10列 2，因为我仍然在12列的上下文中，前8个被占用 isolate div？ Susy中的其他所有东西都具有逻辑性，我没有任何东西问题，但这个让我失望。

但是，如果我指定：

.one

，然后我必须告诉它在第10列。这应该是这样的吗？此？

Answer 1

由于 Susy不知道DOM ，所有定位都是相对于默认流。如果给定上下文中的所有内容都是隔离的 - 隔离可以解决这个问题 - 因为这会将所有内容从水平流中拉出来。但是当你只隔离一个元素时，它会将自己置于其他元素之外。

Susy2 - 网格，以隔离模式跨越速记

1 个答案: