Skip to content

Instantly share code, notes, and snippets.

@davidhellmann
Created February 1, 2021 21:24
Show Gist options
  • Save davidhellmann/009155140a749bf1f2404100aa700877 to your computer and use it in GitHub Desktop.
Save davidhellmann/009155140a749bf1f2404100aa700877 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@for $i from 1 through 24 {
&--size-#{$i} {
grid-column: calc((25 - #{$i}) /2) / span #{$i};
grid-row: calc((25 - #{$i}) / 2) / span #{$i};
}
}
.foo--size-1 {
grid-column: calc((25 - 1) /2)/span 1;
grid-row: calc((25 - 1) / 2)/span 1;
}
.foo--size-2 {
grid-column: calc((25 - 2) /2)/span 2;
grid-row: calc((25 - 2) / 2)/span 2;
}
.foo--size-3 {
grid-column: calc((25 - 3) /2)/span 3;
grid-row: calc((25 - 3) / 2)/span 3;
}
.foo--size-4 {
grid-column: calc((25 - 4) /2)/span 4;
grid-row: calc((25 - 4) / 2)/span 4;
}
.foo--size-5 {
grid-column: calc((25 - 5) /2)/span 5;
grid-row: calc((25 - 5) / 2)/span 5;
}
.foo--size-6 {
grid-column: calc((25 - 6) /2)/span 6;
grid-row: calc((25 - 6) / 2)/span 6;
}
.foo--size-7 {
grid-column: calc((25 - 7) /2)/span 7;
grid-row: calc((25 - 7) / 2)/span 7;
}
.foo--size-8 {
grid-column: calc((25 - 8) /2)/span 8;
grid-row: calc((25 - 8) / 2)/span 8;
}
.foo--size-9 {
grid-column: calc((25 - 9) /2)/span 9;
grid-row: calc((25 - 9) / 2)/span 9;
}
.foo--size-10 {
grid-column: calc((25 - 10) /2)/span 10;
grid-row: calc((25 - 10) / 2)/span 10;
}
.foo--size-11 {
grid-column: calc((25 - 11) /2)/span 11;
grid-row: calc((25 - 11) / 2)/span 11;
}
.foo--size-12 {
grid-column: calc((25 - 12) /2)/span 12;
grid-row: calc((25 - 12) / 2)/span 12;
}
.foo--size-13 {
grid-column: calc((25 - 13) /2)/span 13;
grid-row: calc((25 - 13) / 2)/span 13;
}
.foo--size-14 {
grid-column: calc((25 - 14) /2)/span 14;
grid-row: calc((25 - 14) / 2)/span 14;
}
.foo--size-15 {
grid-column: calc((25 - 15) /2)/span 15;
grid-row: calc((25 - 15) / 2)/span 15;
}
.foo--size-16 {
grid-column: calc((25 - 16) /2)/span 16;
grid-row: calc((25 - 16) / 2)/span 16;
}
.foo--size-17 {
grid-column: calc((25 - 17) /2)/span 17;
grid-row: calc((25 - 17) / 2)/span 17;
}
.foo--size-18 {
grid-column: calc((25 - 18) /2)/span 18;
grid-row: calc((25 - 18) / 2)/span 18;
}
.foo--size-19 {
grid-column: calc((25 - 19) /2)/span 19;
grid-row: calc((25 - 19) / 2)/span 19;
}
.foo--size-20 {
grid-column: calc((25 - 20) /2)/span 20;
grid-row: calc((25 - 20) / 2)/span 20;
}
.foo--size-21 {
grid-column: calc((25 - 21) /2)/span 21;
grid-row: calc((25 - 21) / 2)/span 21;
}
.foo--size-22 {
grid-column: calc((25 - 22) /2)/span 22;
grid-row: calc((25 - 22) / 2)/span 22;
}
.foo--size-23 {
grid-column: calc((25 - 23) /2)/span 23;
grid-row: calc((25 - 23) / 2)/span 23;
}
.foo--size-24 {
grid-column: calc((25 - 24) /2)/span 24;
grid-row: calc((25 - 24) / 2)/span 24;
}
{
"sass": {
"compiler": "Ruby Sass/3.7.4",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment