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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -