Nested Conditions for SCSS

We all know that CSS doesn’t handle any conditions.

It was wonderful when we found that there is capability to execute conditional statements in CSS provided by some css pre-processors such as LESS and SASS (Latest: SCSS which has very similar syntax to Less).

I had been working with both of them lately. Both are awesome.

To my surprise, there was no reference of using nested loops in any of them.

I happened to work around for loop in scss to create a css which makes awesome grids.
The idea was inspired from: http://css-tricks.com/dont-overthink-it-grids/

The for loop has been used in the following way:

$min_width: "(max-width: 700px)"; /* For Responsive - 100% width for all columns 
                                    below 700px resolution */
$n: 16;

@for $i from 1 through $n {
  @for $j from 1 through $i {
    $new_width: $j/$i*100%;
    .col-#{$j}-#{$i} {
      width: $new_width;
      @media #{$min_width} {
        width: 100%;
      }
    }
  }
}

It works totally fine and create a series of css classes in the following manner:

.col-1-1 {width:100%;}
.col-1-2 {width:50%;} 
.col-2-2 {width:100%;}
.col-1-3 {width:33.333%;}
.col-2-3 {width:66.666%;}
.col-3-3 {width:100%;}
.......... likewise ..........
@media (max-width: 700px) {
  .col-1-1 {width:100%;}
  .col-1-2 {width:100%;} 
  .col-2-2 {width:100%;}
  .col-1-3 {width:100%;}
  .col-2-3 {width:100%;}
  .col-3-3 {width:100%;}
  .......... likewise ..........
}