2

Susy を見つけようとしていて、場所によって要素を配置するのに苦労しています。「最初」と「最後」は期待どおりに機能しますが、特定の列の番号を使用すると機能しません。どこが間違っていますか？

.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>
4

1 に答える 1

2

私のエラーに気付きました（他の誰かが必要な場合に備えて）：「at」キーワードは分離出力でのみ機能し、グリッドはフロートに設定されています。修正するには、全体の設定でフロートを分離するように変更するか、問題の要素に直接適用します。

.number {
  @include span(isolate 4 at 5);
}

http://sassmeister.com/gist/42d1efaf1ddd9c721379

于 2014-09-16T12:45:11.583 に答える