Search code examples
singularitygs

How do I create a set of classes based on the number of grid columns?


Is there a way to have Singularity automatically generate a set of available classes based on the number of grid columns?

$grids: 12;

.span1-1 { @include grid-span(1,1);}
.span1-2 { @include grid-span(1,2);}
.span1-3 { @include grid-span(1,3);}
...
.span11-1 { @include grid-span(11,1);}
.span12 { @include grid-span(12);}

Solution

  • Yup:

    $grids: 12;
    $gutters: .5;
    
    @for $i from 1 through $grids {
        @for $n from 1 through $grids - $i + 1 {
            .span#{$n}-#{$i} {
                @include grid-span($n, $i);
                overflow: visible !important;
            }
        }
    }