0

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

私はまだ 12 列のコンテキストにあり、最初の 8 列はdivisolateで占められていたので、2 列ではなく 10 列を指定 してください。.oneSusy の他のすべては論理的に動作し、問題はありませんでしたが、これは私をつまずかせます。

ただし、指定した場合：

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

の場合、10 列目にあるように指定する必要があります。これはこのように機能するはずですか？

4

1 に答える 1

1

Susy は DOM を認識していないため、すべての配置はデフォルトのフローに関連しています。特定のコンテキスト内のすべてが分離されている場合、分離はそれを回避できます。これは、水平方向の流れからすべてを引き出すためです。ただし、要素を 1 つだけ分離すると、他の要素から離れて左側に配置されます。

于 2014-09-24T04:55:29.340 に答える