Test Layout Compile Speed

config.rb

require "susy"
require "breakpoint"
css_dir = "."
sass_dir = "."

speed-test.scss

@import "susy";
@import "breakpoint";

// -----------------------------------------
// A.

// Breakpoint-sass based media queries
$breakpoint-map : (
  small   : (400px, "no-query" true),
  medium  : (481px, "no-query" true),
  large   : (769px, "no-query" true),
  xlarge  : (1000px, "no-query" true)
);


// Columns in separate map
$columns-map : (
  small   : 2,
  medium  : 4,
  large   : 8,
  xlarge  : 12,
);

// -----------------------------------------
// B.

// Susy breakpoints with column count
$susy-layout-map: (
  small   : ( (400px, "no-query" true)  , 2 ),
  medium  : ( (481px, "no-query" true)  , 4 ),
  large   : ( (769px, "no-query" true)  , 8 ),
  xlarge  : ( (1000px, "no-query" true) , 12 )
);

// -----------------------------------------
// C.

// Susy layouts in separate variables
$susy-layout-small    : (400px, "no-query" true)   , 2;
$susy-layout-medium   : (481px, "no-query" true)   , 4;
$susy-layout-large    : (769px, "no-query" true)   , 8;
$susy-layout-xlarge   : (1000px, "no-query" true)  , 12;

// -----------------------------------------
// D.

// Breakpoint-sass based media queries in separate variables
$breakpoint-small   : (400px, "no-query" true);
$breakpoint-medium  : (481px, "no-query" true);
$breakpoint-large   : (769px, "no-query" true);
$breakpoint-xlarge  : (1000px, "no-query" true);

// -----------------------------------------
// E.

// Susy media (susy's own media query mixin) in separate variables
$susy-media-small   : "(min-width: 400px)"  , false;
$susy-media-medium  : "(min-width: 481px)"  , false;
$susy-media-large   : "(min-width: 769px)"  , false;
$susy-media-xlarge  : "(min-width: 1000px)" , false;

// -----------------------------------------
// F.

// Standard media queries in separate variables
$media-small    : "(min-width: 400px)";
$media-medium   : "(min-width: 481px)";
$media-large    : "(min-width: 769px)";
$media-xlarge   : "(min-width: 1000px)";

// =============================================================================

$times  : 100;
$test   : 8;

// Print test number
@debug "Test no: === #{$test} === Repeat: #{$times} times";

// -----------------------------------------
// 1.

@if $test == 1 {
  @for $i from 1 through $times {
    @each $name in small, medium, large, xlarge {
      $breakpoint: map-get($breakpoint-map, $name);
      $context: map-get($columns-map, $name);
      @include susy-breakpoint($breakpoint, $context) {
        content: "2: Context: #{$context} | Breakpoint: #{$breakpoint}";
      }
    }
  }
}

// -----------------------------------------
// 2.

@if $test == 2 {
  @for $i from 1 through $times {
    @each $name in small, medium, large, xlarge {
      $layout: map-get($susy-layout-map, $name);
      $breakpoint: nth($layout, 1);
      $context: nth($layout, 2);
      @include susy-breakpoint($breakpoint, $context) {
        content: "2: Context: #{$context} | Breakpoint: #{$breakpoint}";
      }
    }
  }
}

// -----------------------------------------
// 3.

@if $test == 3 {
  @for $i from 1 through $times {
    @each $layout in $susy-layout-small, $susy-layout-medium, $susy-layout-large, $susy-layout-xlarge {
      @include susy-breakpoint($layout...) {
        content: "3: Context: #{nth($layout, 2)} | Breakpoint: #{nth($layout, 1)}";
      }
    }
  }
}

// -----------------------------------------
// 4.

@if $test == 4 {
  @for $i from 1 through $times {
    @each $susy-media in $susy-media-small, $susy-media-medium, $susy-media-large, $susy-media-xlarge {
      @include susy-media($susy-media...) {
        content: "4: Breakpoint: #{nth($susy-media, 1)}";
      }
    }
  }
}

// -----------------------------------------
// 5.

@if $test == 5 {
  @for $i from 1 through $times {
    @each $layout in $susy-layout-small, $susy-layout-medium, $susy-layout-large, $susy-layout-xlarge {
      @include breakpoint(nth($layout, 1)) {
        content: "5: Context: #{nth($layout, 2)} | Breakpoint: #{nth($layout, 1)}";
      }
    }
  }
}

// -----------------------------------------
// 6.

@if $test == 6 {
  @for $i from 1 through $times {
    @each $breakpoint in $breakpoint-small, $breakpoint-medium, $breakpoint-large, $breakpoint-xlarge {
      @include breakpoint($breakpoint) {
        content: "6: Breakpoint: #{$breakpoint}";
      }
    }
  }
}

// -----------------------------------------
// 7.

@if $test == 7 {
  @for $i from 1 through $times {
    @each $media in $media-small, $media-medium, $media-large, $media-xlarge {
      @media #{$media} {
        content: "7: Breakpoint: #{$media}";
      }
    }
  }
}

test-results.txt

# compass compile --force --time

# Repeat 100 times

Test no: 1 --- 100 times | 4.299s
Test no: 1 --- 100 times | 4.153s
Test no: 1 --- 100 times | 4.382s

Test no: 2 --- 100 times | 4.346s
Test no: 2 --- 100 times | 4.371s
Test no: 2 --- 100 times | 4.328s

Test no: 3 --- 100 times | 4.226s
Test no: 3 --- 100 times | 4.286s
Test no: 3 --- 100 times | 4.356s

Test no: 4 --- 100 times | 0.962s
Test no: 4 --- 100 times | 0.906s
Test no: 4 --- 100 times | 0.923s

Test no: 5 --- 100 times | 2.144s
Test no: 5 --- 100 times | 3.907s
Test no: 5 --- 100 times | 2.037s

Test no: 6 --- 100 times | 2.057s
Test no: 6 --- 100 times | 1.966s
Test no: 6 --- 100 times | 2.134s

Test no: 7 --- 100 times | 0.447s
Test no: 7 --- 100 times | 0.42s
Test no: 7 --- 100 times | 0.395s

Test no: 8 --- 100 times | 0.215s
Test no: 8 --- 100 times | 0.168s
Test no: 8 --- 100 times | 0.182s

# Repeat 1000 times

Test no: 1 --- 1000 times | 49.158s
Test no: 1 --- 1000 times | 48.954s
Test no: 1 --- 1000 times | 49.339s
Test no: 1 --- 1000 times | 49.504s

Test no: 2 --- 1000 times | 49.802s
Test no: 2 --- 1000 times | 48.95s

Test no: 3 --- 1000 times | 50.226s
Test no: 3 --- 1000 times | 49.267s
Test no: 3 --- 1000 times | 52.121s
Test no: 3 --- 1000 times | 49.007s

Test no: 4 --- 1000 times | 14.386s
Test no: 4 --- 1000 times | 13.872s
Test no: 4 --- 1000 times | 14.128s

Test no: 5 --- 1000 times | 27.985s
Test no: 5 --- 1000 times | 27.964s
Test no: 5 --- 1000 times | 26.321s

Test no: 6 --- 1000 times | 25.797s
Test no: 6 --- 1000 times | 25.913s
Test no: 6 --- 1000 times | 26.126s

Test no: 7 --- 1000 times | 7.307s
Test no: 7 --- 1000 times | 7.748s
Test no: 7 --- 1000 times | 7.342s
Test no: 7 --- 1000 times | 7.241s

Test no: 8 --- 1000 times | 8.906s
Test no: 8 --- 1000 times | 9.51s
Test no: 8 --- 1000 times | 8.844s
Test no: 8 --- 1000 times | 8.831s