Search code examples
singularitygs

column-span function, how to return width of column in current grid not global one?


I would like to use the "column-span" function to return the width of the grid column, but without including a specific grid in this function, the global "grid" variable is used.

As I'm creating a mobile first design, the global grid variable is set to 4, but with breakpoint, using "add-grid", the div should include 16 columns at this specific grid. column-span ignores this, so it returns the column as If the grid is 4 column, not 16.


Solution

  • So the way add-* works in Singularity is that instead of writing different code automatically for you, it changes the default when inside a matching breakpoint media query. The reason Singularity doesn't automatically write all of the changes for you is it has no way of knowing how you want something to change between different grid definitions and instead of guessing and making a mess of things, it requires you to specify exactly how you want things to change.

    I have updated your link to show how calling column-span again inside of an appropriate breakpoint mixin does in fact use the default you've defined.