sass - How to remove gutter for first and last element of row in Susy grid -
how can remove gutters first , last elements of row while using susy grid?
this mockup markup.
http://codepen.io/anon/pen/mvbmly
$susy:( columns: 12, gutters:2, gutter-position:split, ); ul{ @include container(800px); } li{ @include span(4); }
it uses "gutter-position:split". can see on codepen, first , last element in row still have outside margins.
i can work around setting gutter-position "after" , using "last" keyword on last element in row.
http://codepen.io/anon/pen/ejgwke
$susy:( columns: 12, gutters:2, gutter-position:after, ); ul{ @include container(800px); } li{ @include span(4); } li:nth-of-type(3n+3){ @include span(last 4); }
is there other way? using nht-of-type selector kinda defies point of using grid me.
after bit of experimenting, managed create mixin provides such functionality:
@mixin new_span($elements){ @include span($elements); $n: map-get($susy, columns)/$elements; &:nth-of-type(#{$n}n +#{$n}){ @include span(last $elements); } }
keep in mind in order work, needs gutter-position set after.
it meant usd in same way oryginal susy span mixin. tested on mock-up grid , worked, thought might need more testing.
Comments
Post a Comment