Susy2 - Сетки, сокращенная область с режимом изоляции

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

Не должно ли это охватывать стенографию с isolate режим, укажите столбец 10 вместо 2, так как я по-прежнему в контексте 12 столбцов, и первые 8 были заняты.one DIV? Все остальное в Сьюзи ведет себя логично, и у меня не было никаких проблем, но этот сбивает меня с толку.

Однако, если я укажу:

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

тогда я должен сказать, что это будет в 10-м столбце. Это должно работать так?

Источник

1 ответ

Так как Сьюзи не знает о DOM, все положения относительно потока по умолчанию. Изоляция может обойти это, если все в данном контексте изолировано - потому что это вытягивает все из горизонтального потока. Но когда вы изолируете только один элемент, он будет позиционироваться от других элементов слева от него.

Источник
Другие вопросы по тегам