I am currently using SUSY to create a responsive grid system for the website I'm working on.
My grid.scss file looks a bit like this:
@for $i from 1 to $noOfGridColumns+1 {
.desktop-#{$i}{
@include span ($i of $noOfGridColumns);
@media screen and (max-width:641px){
@include span ($noOfGridColumns of $noOfGridColumns);
}
}
&:last-child{
@include span(last $i of $noOfGridColumns);
@media screen and (max-width:641px){
@include span ($noOfGridColumns of $noOfGridColumns);
}
}
}
However when I use a desktop-6 class within another desktop-6 class my gutter width becomes half as small as it is for non-nested content.
I understand why this is happening as everything is percentage based according to the column width but how can I overwrite this or add styles for nested DIVs to use a gutter twice as wide?
Any help would be great.
Thanks