Skip to content

Instantly share code, notes, and snippets.

@LegitDongo
Last active April 29, 2019 21:29
Show Gist options
  • Save LegitDongo/957c528efe1608f96145c540efb6c75c to your computer and use it in GitHub Desktop.
Save LegitDongo/957c528efe1608f96145c540efb6c75c to your computer and use it in GitHub Desktop.
Create a responsive grid border system - for when you want borders on all middle items, but not the last one. Assumed imports of bootstrap and the use of the common block-grid system.
@mixin grid-border($subSelector, $color, $direction: 'right'){
@each $key, $width in $grid-breakpoints {
@media(min-width: $width) {
@for $i from 12 through 1 {
&.block-grid-#{$key}-#{$i} {
> #{$subSelector}:not(:nth-child(#{$i}n)) {
border-#{$direction}: 1px solid #{$color};
}
> #{$subSelector}:nth-child(#{$i}n){
border-#{$direction}: 0;
}
}
}
}
}
}
.grid-border-right {
@include grid-border('.block-grid-item', black, 'right');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment