0

If you have a look at this Code Pen demo i've created: http://codepen.io/rctneil/pen/aNJjeP

How can I use Susy to get the padding on both the <aside> and <section> to be half a column of the outer grid? I have tried using Susy's nested mixin but the padding is not correct and is smaller than half a column.

Any ideas?

rctneil
  • 7,016
  • 10
  • 40
  • 83

1 Answers1

0

There seems to be a bug with decimal spans (span(0.5)). I'll look into that. For now, the simplest solution is to use padding: span(1) / 2 (dividing a column manually). You don't need those nested mixins - they aren't doing anything at all.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Ok thanks! In what circumstance do I need the nested mixin? Ie: can it be used to make items in nested places align to an outside grid? – rctneil Mar 22 '16 at 16:33
  • Eg: In this scenario: http://codepen.io/rctneil/pen/oxWgpX How to get the margin between divs one and two the match the margins on the outer grid? – rctneil Mar 22 '16 at 16:52
  • Susy grids are ephemeral. They don't exist in any real way, outside a particular combination of settings. Those settings can be changed globally in the `$susy` map, or locally as arguments to any given mixin or function. The `nested` and `with-layout` blocks provide a compromise, changing the global variables temporarily for a block of code. You can use them anywhere you want the grid settings to be different, for any reason. Semantically, `nested` is for saying "The global grid may have 12 columns, but right now we're nested inside a 6-column element". – Miriam Suzanne Mar 22 '16 at 17:10
  • In your example, you could use `nested(8)` to change the global setting around `one` and `two`, but it would be simpler in this case to use the local override: `@include span(4 of 8)`. – Miriam Suzanne Mar 22 '16 at 17:11
  • You used `span(6)` because you wanted to span half the space, with a global setting of `12`. But you are not in the global context. You are in a nested context of `8`, and you need to let Susy know that if you want the grid to stay aligned. – Miriam Suzanne Mar 22 '16 at 17:13
  • Fantastic! Much appreciated. I do understand that the grids don't actually exist anywhere but it was trying to get items on an inner grid aligned to an outer grid and that half gutter padding issue that was confusing me. Thanks! Will put this to use in a project tomorrow! – rctneil Mar 22 '16 at 17:15