CODEWITHSUNDEEP
susysusy-sass
velvetkevorkian
velvetkevorkian

Reputation: 780

Nested split gutters using Susy's span functions

Does Susy have a built in way to account for children of parents with split gutters using the span function rather than the mixin? The child here ends up gutter short (as expected): 

$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)

Adding the gutter in manually — width: span(3 of 5) + gutter() — or changing the gutter style — width: span(3 of 5 after) — both get the correct result but I'm not sure if there's a more intuitive way, other than writing my own nested-span function to wrap one of those.

Upvotes: 0

Views: 220

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

Susy's split-gutter grid expects the parent element to be extra-wide (spanning its own gutters), and the child to be narrow (with gutters pushing it into place). That is handled automatically by the mixins if you use nest on the parent — e.g. span(5 nest).

In your case, the child isn't actually missing a gutter — the math is all wrong. Susy is trying to calculate span / wide-container, but your container isn't actually wide. The error is nearly the width of a gutter, but not exactly. Adding a gutter will get you close, but it's not accurate.

The after syntax works perfectly because after-gutters expect a normal-width container, which is what you have. Basically, you are telling Susy to divide span / container instead of span / wide-container.

I put together some examples on codepen — what you have, what Susy expects, and how the after hack works.

Susy 2.x does not have a better way to handle this situation, because it's not an expected use-case. Susy 3.x will allow you to control the spread (narrow or wide) of a parent and child separately, to get the math you need in any situation.

Upvotes: 1

Related Questions