Skip to content

Instantly share code, notes, and snippets.

@gmirmand
Last active August 1, 2018 15:04
Show Gist options
  • Save gmirmand/888d46dbd86f35913ab197d1c2577c41 to your computer and use it in GitHub Desktop.
Save gmirmand/888d46dbd86f35913ab197d1c2577c41 to your computer and use it in GitHub Desktop.
A mixin removing margins on the sides & allowing responsive adaptivity
@mixin columnReset($columnnb, $margewidth : 15px){
&:nth-child(#{$columnnb}n+1) {
margin-left: $margewidth;
}
&:nth-child(#{$columnnb}n+#{$columnnb}){
margin-right: $margewidth;
}
}
// Call this mixin like :
// @include column(4);
// For a bloc of 25% of the width (4 columns)
@mixin column($columnnb, $margewidth : 15px) {
$marge: (($columnnb * 2 * $margewidth) - ($margewidth * 2)) / $columnnb;
width: calc(#{100% / $columnnb} - #{$marge});
margin-left: $margewidth;
margin-right: $margewidth;
@for $i from 1 through $columnnb - 1 {
@include columnReset($i, $margewidth);
}
&:first-child{
margin-left: 0;
}
&:nth-child(#{$columnnb}n+#{1 + $columnnb}) {
margin-left: 0;
}
&:nth-child(#{$columnnb}n+#{$columnnb}){
margin-right: 0;
}
&:last-child {
margin-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment