SASS/SCSS Loop for a Simple Grid System

Taking some inspiration from Chris Coyier’s Don’t Overthink It Grids I have created a SCSS loop to create the classes needed for a basic grid system.

See the Pen SCSS Grid Loop by Ed Moore (@nichmekof) on CodePen.

From this code all you need to do is change the amount of columns you want to have in your grid system and it will generate all the classes needed. If a class already exists with the same width it will not generate another class.

For example, the class  .col-1-2 and .col-2-4  will have the same width of 50%, so the loop will only generate the .col-1-2 class.

If you don’t want to clutter your CSS file, you can change this loop to extend from SCSS placeholders instead. Just change the SCSS loop to use %col-#{$j}-#{$i} { instead of .col-#{$j}-#{$i} {.

What are your thoughts on this and how would you improve it? Please leave your feedback in the comments.

2 thoughts on SASS/SCSS Loop for a Simple Grid System

  1. naturally like your website but you have
    to test the spelling on quite a few of your posts.

    Several of them are rife with spelling problems and I in finding it
    very bothersome to tell the truth on the other hand I will surely come again again.

Leave a Reply

Your email address will not be published. Required fields are marked *