I have used Compass Susy on a couple of projects recently and have a few questions about it that have occurred to me now I have tried it out a couple of times.
I am starting as a desktop first workflow here by the way.
On these projects I have set my default column widths, gutters, etc.
Let's say I have a 12 column grid of 90px with 10px gutters
Then, when I reach a media query for mobile, say I want a 4 column grid then I have a media layout like: $mobile: 4 480px
@include at-breakpoint($mobile) { // Styles here }
What I have gotten really confused about is I don;t understand the media layouts. If I specify in the media layout that I want 4 columns at a min width of 480 pixels then how does it know what widths the columns are or what gutter width I want. I'm guessing it uses the defaults. Is that what it uses?
To get around this, for each media query I have ended up having to set the media query, span the columns and then use the with-grid-settings mixin to specify a new grid and then re include the container.
I may just be getting the wrong end of the stick. Could someone explain how it is meant to work and how I should be going about using Susy properly?
Thanks
You're right. at-breakpoint is not meant to give you completely new grid settings at every size - only to change the number of columns. with-grid-settings is the right tool to use for changing the grid settings, and the two of them work well together if you need to change grid settings at different sizes.
@include at-breakpoint($mobile) {
@include with-grid-settings(4,3em,2em,1em) { // styles here }
}
There is currently no shortcut for that.