Вложенные раздельные желобы с использованием функций пролета Сьюзи

Question

Есть ли встроенный способ усыновления для детей родителей с раздельными желобами, используя функцию span, а не mixin? Ребенок здесь заканчивается желобом короткий (как и ожидалось):

$susy: (columns: 8, gutters: 0.3, global-box-sizing: border-box, gutter-position: split) 


.full_width 
    width: span(5) 

.three_columns 
    width: span(3 of 5) 

Добавление канаву вручную - width: span(3 of 5) + gutter() - или изменить стиль водосточную - width: span(3 of 5 after) - как получить правильный результат, но я не уверен, если есть более интуитивно понятный способ, кроме написания моей собственной функции nested-span, чтобы обернуть один из них.

Answer 1

Сетчатая решетка Сьюза ожидает, что родительский элемент будет слишком обширным (охватывающий собственные желоба), а ребенок должен быть узким (с канавками, толкающими его на место). Это обрабатывается автоматически миксинами, если вы используете nest для родителя - например. span(5 nest).

В вашем случае ребенок на самом деле не хватает желоба - математика ошибочна. Сьюзи пытается вычислить span/wide-container, но ваш контейнер на самом деле не широк. Ошибка почти равна ширине желоба, но не совсем. Добавление желоба поможет вам приблизиться, но это не точно.

Синтаксис after отлично работает, потому что после желоба ожидают контейнер нормальной ширины, который у вас есть. В принципе, вы говорите Сьюзи разделить span/container вместо span/wide-container.

Я собрал some examples on codepen - что у вас есть, что ожидает Сузи, и как работает after.

У Susy 2.x нет лучшего способа справиться с этой ситуацией, потому что это не ожидаемый случай использования. Susy 3.x позволит вам управлять распределением (узким или широким) родителя и ребенка отдельно, чтобы получить нужную математику в любой ситуации.