Skip to content

Instantly share code, notes, and snippets.

@rcaracaus
Created July 22, 2014 04:38
Show Gist options
  • Save rcaracaus/4c5be0f06ca580a5b2f0 to your computer and use it in GitHub Desktop.
Save rcaracaus/4c5be0f06ca580a5b2f0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div></div>
<div></div>
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
@mixin nthGrid($n, $marginX, $marginY) {
float: left;
width: ((100 - ($marginX * ($n - 1))) / $n);
margin-right: $marginX;
margin-bottom: $marginY;
&:nth-child(#{$n+'n'} ) { margin-right: 0 }
&:nth-child(#{$n+'n'} + 1) { clear: left; }
border-bottom: 0;
}
.testSmall {
@include nthGrid(2, 2%, 0%);
}
.testLarge {
@include nthGrid(3, 2.15%, 2.15%);
}
.testSmall {
float: left;
width: 49%;
margin-right: 2%;
margin-bottom: 0%;
border-bottom: 0;
}
.testSmall:nth-child(2n) {
margin-right: 0;
}
.testSmall:nth-child(2n + 1) {
clear: left;
}
.testLarge {
float: left;
width: 31.9%;
margin-right: 2.15%;
margin-bottom: 2.15%;
border-bottom: 0;
}
.testLarge:nth-child(3n) {
margin-right: 0;
}
.testLarge:nth-child(3n + 1) {
clear: left;
}
<div></div>
<div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment