Grouping classes with similar rules in SASS

Question

I'm using the following algorithm to create column classes in SASS:

$columns: 8;
$exclude-columns: 5 7;

@for $i from 1 through $columns {
    @for $j from 1 through $i {
        $width: (100% / $i) * $j;
        @if $i != $j and index($exclude-columns, $i) {
            .layout-unit-#{$j}of#{$i} {
                width: $width;
            }
        }
    }
}

It's working fine, however, the output has quite a bit of duplication:

.layout-unit-1of2 { width: 50%; }
.layout-unit-1of3 { width: 33.33333%; }
.layout-unit-2of3 { width: 66.66667%; }
.layout-unit-1of4 { width: 25%; }
.layout-unit-2of4 { width: 50%; }
.layout-unit-3of4 { width: 75%; }
.layout-unit-1of6 { width: 16.66667%; }
.layout-unit-2of6 { width: 33.33333%; }
.layout-unit-3of6 { width: 50%; }
.layout-unit-4of6 { width: 66.66667%; }
.layout-unit-5of6 { width: 83.33333%; }
.layout-unit-1of8 { width: 12.5%; }
.layout-unit-2of8 { width: 25%; }
.layout-unit-3of8 { width: 37.5%; }
.layout-unit-4of8 { width: 50%; }
.layout-unit-5of8 { width: 62.5%; }
.layout-unit-6of8 { width: 75%; } 
.layout-unit-7of8 { width: 87.5%; }

Is there a way to get the output to look more like this:

.layout-unit-1of2,
.layout-unit-2of4,
.layout-unit-3of6,
.layout-unit-4of8 { width: 50%; }

.layout-unit-1of3,
.layout-unit-2of6 { width: 33.33333%; }

.layout-unit-2of3,
.layout-unit-4of6 { width: 66.66667%; }

.layout-unit-1of4,
.layout-unit-2of8 { width: 25%; }

.layout-unit-3of4,
.layout-unit-6of8 { width: 75%; } 

.layout-unit-1of6 { width: 16.66667%; }
.layout-unit-5of6 { width: 83.33333%; }
.layout-unit-1of8 { width: 12.5%; }
.layout-unit-3of8 { width: 37.5%; }
.layout-unit-5of8 { width: 62.5%; }
.layout-unit-7of8 { width: 87.5%; }

Or is this a limitation of SASS?

possible duplicate of [SASS @for loop output CSS as one block of code?](http://stackoverflow.com/questions/16593917/sass-for-loop-output-css-as-one-block-of-code) — cimmanon, Jun 26 '14 at 11:24

score 2 · Accepted Answer · answered Jun 26 '14 at 12:24

It's not a limitation of Sass, but the algorithm.

Here is a solution that requires at least Sass 3.3 (see live demo on SassMeister):
Note: I fixed your code to support the exclusion of columns.

$columns: 8;
$exclude-columns: 5 7;

// A stack to store the different widths.
$width_stack: ();

@for $i from 1 through $columns {
  @for $j from 1 through $i {
    @if $i != $j and not index($exclude-columns, $i) {
      $width: (100% / $i) * $j;

      // Compute the number 66.66667% to a valid CSS selector: "66-66667".
      $width_unitless: $width / 1% + unquote("");
      $width_dot: str-index($width_unitless, '.');
      @if $width_dot {
        $width_unitless: str-slice($width_unitless, 0, $width_dot - 1) +
                         "-" +
                         str-slice($width_unitless, $width_dot + 1);
      }

      // Manage the stack of known widths to avoid repeats.
      @if not index($width_stack, $width_unitless) {
        $width_stack: append($width_stack, $width_unitless);
        // Dynamic placeholder!
        %mycols-#{$width_unitless} {
          width: $width;
        }
      }

      .layout-unit-#{$j}of#{$i} {
        @extend %mycols-#{$width_unitless};
      }
    }
  }
}

Grouping classes with similar rules in SASS

1 Answers1