Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----

@mixin section($section, $sub: false) {
  // Creates table of contents map
  @if variable-exists(toc){} @else {
    $toc:() !global;
  }

  // Creates value to be used as section numbers
  @if variable-exists(toc-value){} @else {
    $toc-value: 0 !global;
  }

  // Sets index numbering
  @if $sub == false { // increments by 1 (rounding down)
    $toc-value: floor($toc-value) + 1 !global;
  } @else { // increments by .1
    $toc-value: $toc-value + .1  !global;
  }

  // adds key (toc number) and value (string) to $toc map
  $toc: map-merge($toc, ($toc-value: $section)) !global;
  
  $spacing: ' ';
  @for $i from 1 to (6 - str-length('#{$toc-value}')) {
    $spacing: $spacing + ' ';
  }
  /*--------------------------------------------------------------
  #{$toc-value}#{$spacing}#{$section}
  --------------------------------------------------------------*/
}


// Outputs TOC - only works at the end of the file :(
@mixin table-of-contents($map: $toc) {
  @each $number, $item in $map {
    $spacing: ' ';
    @for $i from 1 to (6 - str-length('#{$number}')) {
      $spacing: $spacing + ' ';
    }
    /*    #{$number}#{$spacing}- #{$item} */
  }
}


@include section("Hello friend!");
.hello {
  color: hello;
}
@include section("Let's tak about indices.", true);
.index {
  background: awesome;
}

@include section("Who doesn't love a good table of contents?");
// @import 'some/file';
.code {
  font-size: bazillions;
}

@include section("I do.", true);
@include section("I especially love generated ToCs.");
@include section("That's why I made this mixin.", true);
@include section("Now, reararranging partials with a ToC isn't a nightmare.");
@include section("You're welcome.", true);

/*

  I would love the list below to be at the top of the compiled CSS.
  Any ideas?

*/

@include table-of-contents;

SassMeister-output.css

/*--------------------------------------------------------------
1     Hello friend!
--------------------------------------------------------------*/
.hello {
  color: hello;
}

/*--------------------------------------------------------------
1.1   Let's tak about indices.
--------------------------------------------------------------*/
.index {
  background: awesome;
}

/*--------------------------------------------------------------
2     Who doesn't love a good table of contents?
--------------------------------------------------------------*/
.code {
  font-size: bazillions;
}

/*--------------------------------------------------------------
2.1   I do.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
3     I especially love generated ToCs.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
3.1   That's why I made this mixin.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
4     Now, reararranging partials with a ToC isn't a nightmare.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
4.1   You're welcome.
--------------------------------------------------------------*/
/*

  I would love the list below to be at the top of the compiled CSS.
  Any ideas?

*/
/*    1     - Hello friend! */
/*    1.1   - Let's tak about indices. */
/*    2     - Who doesn't love a good table of contents? */
/*    2.1   - I do. */
/*    3     - I especially love generated ToCs. */
/*    3.1   - That's why I made this mixin. */
/*    4     - Now, reararranging partials with a ToC isn't a nightmare. */
/*    4.1   - You're welcome. */