为某个文件/分组的类设置suzy gutters?

时间:2016-04-28 13:44:08

标签: susy

我知道您可以在全球范围内为suzy网格设置排水沟:

$susy: (
   columns: 12,
   gutters: 0.32,
}

您还可以为特定类重写此内容:

.something {
  @include span(1 of 3);
  @include gutters(1em);
}

但是你可以覆盖某个文件的装订线吗?

如果下面的代码是我的代码的简化版本,那么最简单的方法是使row1与row2s有一个不同的装订线?

<div class="container1">
    <div class="row1">
        // Something
    </div>
    <div class="row1">
        // Something
    </div>
    <div class="row1">
        <div class="container1">
            <div class="row1">
                // Something
            </div>
            <div class="row1">
                // Something
            </div>
            <div class="row1">
                // Something
            </div>
        </div>
    </div>
</div>

<div class="container2">
    <div class="row2">
        // Something
    </div>
    <div class="row2">
        // Something
    </div>
    <div class="row2">
        <div class="container2">
            <div class="row2">
                // Something
            </div>
            <div class="row2">
                // Something
            </div>
            <div class="row2">
                // Something
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

您可以使用with-layout功能为任何内容组设置特殊网格:

$susy: (gutters: 0.3);
// everything out here will use 0.3 gutters...

@include with-layout((gutters: 0.5)) {
  // everything in here will use 0.5 gutters...  
  .row2 {
    @include span(3);
  }
}

// everything out here will use 0.3 gutters again...

mixin接受任何标准的Susy网格图(上面使用)或网格简写作为参数。您可以获得更多详细信息from the docs