0

susy を使用して、ブートストラップのような単純なグリッド システムを作成したいと考えています。

私のスージー設定：

$susy: (
    columns: 12,
    gutters: 1/4,
    gutter-position: inside,
    global-box-sizing: border-box,
);

サス:

[class^="col-"].last {
    @include last();
}

[class^="col-"].nest {
    padding:0;
}

@for $i from 1 through 12 {
    .col-#{$i} {
        @include span($i of 12);
    }
}

HTML

<div id="left" class="col-6">left</div>
<div id="right" class="col-6 last nest">
    <div class="col-6">right 1</div>
    <div class="col-6 last">right 2</div>
</div>

問題は、ネストされた div 内のパディングです。#leftおよび#rightdivのパディングは適切ですが、 susy はパーセンテージをパディングとして使用するため、#right > .col-6内部の div ( )は小さくなっています。#right

このようにsusyを使用する方法はありますか？

4

1 に答える 1

1

Susy には「nested」と呼ばれる mixin があります。スージードキュメンテーション

これは、元の溝と列のサイズを維持するために探しているものだと思います.

于 2015-02-24T15:53:51.287 に答える