Как использовать сетки Susy для создания сетки стиля «bootstrap»?

Question

Мне нравится, как Bootstrap использует paddings, а затем отрицательно наносит «строку», чтобы привести все в соответствие. Он удалил необходимость в селекторах :nth-child при попытке удалить водостоки на определенные вещи.

Но мне нравится указывать водосточные желоба на карте, и они устанавливаются в процентах. Мне это удалось, но он чувствует себя неуклюжим и удивляется, есть ли лучший способ.

Config:

$split-gutter: (
    columns: 12, 
    gutters: .8 
); 

Получить половину стоимости Желоб:

$susy-split-gutter-width: (span(1) * map-get($split-gutter, gutters))/2; 

стили Row:

.row { 
    @include clear; 
    margin-left: -$susy-split-gutter-width; 
    margin-right: -$susy-split-gutter-width; 
} 

Набор стилей базы столбцов:

[class^="col-"] { 
    float: left; 
    padding-left: $susy-split-gutter-width; 
    padding-right: $susy-split-gutter-width; 
} 

Устанавливает ширину столбцов:

.col-1 { 
    width: span(1); 
} 

.col-2 { 
    width: span(2); 
} 

...etc 

Это нормально. Но мне кажется, что я взламываю подозрительные ценности, и я не уверен, что это здорово. Есть ли способ лучше?

Answer 1

Susy имеет gutter-position установку, которая уже позволяет выбрать split (половина поля переплета) или inside (половинные водосточные отступы) в качестве опции - так что вы не должны делать, что математика самостоятельно. Установите положение водосточного желоба на inside, а функция gutter() вернет ширину половинного желоба. Здесь in sassmeister сплит желобов:

$susy: (
    columns: 12, 
    gutters: 0.8, 
    gutter-position: split, 
); 

@include border-box-sizing; 

.container { 
    @include container(); 
} 

.row { 
    margin-left: 0 - gutter(); 
    margin-right: 0 - gutter(); 
} 

.column { 
    @include span(2) 
} 

Answer 2

Вот как Susyboot решает это:

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

@include border-box-sizing; 

.container { 
    @include container(); 
    padding: 0 gutter(); 
    @include susy-clearfix; 
} 

.row { 
    margin: 0 gutter() * -1; 
    @include susy-clearfix; 
} 

А вот перл:

gem install susyboot 

Вы можете объединить усилия с автором (меня) и сделать проект лучше.