Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

/**
 * libsass list manipulation problem
 * I am using the following code as a crude example.
 * the real world application I am trying to achieve
 * is providing grid system setup via a single $args array.
 */
 

/**
 * Sass-lib-maps polyfill for sass 3.3+ list map
 * support in libsass 2.0.0
 */
@import "sass-list-maps";

/**
 * Basic multidimensional array, not the most practical
 * real world example but it does a good job of
 * illustrating the problem
 */
$items: (
  item1(
    option 10px
  ),
  item2(
    option 20px
  ),
  item3(
    option 30px
  )
);


/**
 * Trying to use sass @each to walk through the above
 * array '$items'. As you can see from the output the
 * map-get function returns a null value.
 */
 
 /**
  * Couldn't get this to work. One point to tackle is to extend sass-list-maps
  * to be able to handle multi dimensional lists.
  * Another approach is listed farther below
  */
.rule{
  @each $item in $items{
    width: map-get($item,option);
  }
}


/**
 * Lets make sure that the map-get function works
 * as expected outside the @each loop.
 * 
 */
$items2: (
  width 10px,
  height 20px
);

$keys: (width height);

.rule2{
  @each $key in $keys {
    #{$key}: map-get($items2,#{$key});
  }
}

/**
 * New setup of grid variables
 */
$m: "some value";
$l: "large breakpoint";

$default:(
  columns         6,
  suffix          null,
  breakpoint      null,
  gutter          30px
);

$medium:(
  columns         12,
  suffix          'm',
  breakpoint      $m,
  gutter          30px
);

$large:(
  columns         12,
  suffix          'l',
  breakpoint      $l,
  gutter          30px
);

/**
 * Create a list of lists
 */
$gridList: $default $medium $large;
$gridKeys: "columns" "suffix" "breakpoint" "gutter";

/**
 * The .grid class is obviously bogus and non-functional but it is here to demonstrate
 * that we can go through mutliple lists. I would place the grid calculations in 
 * here and use it like this
 */
.grid {
  @each $list in $gridList {
    @each $key in $gridKeys {
      #{$key}: map-get($list, $key); 
    }
  }
}
/**
 * Real world array(list) I would like to use.
 * As the first children of the list are dynamic 
 * I need to be able to walk through with @each.
 */

 /**
 $grid_args:(

    default(
        options (
            columns         6,
            suffix          null,
            breakpoint      null,
            gutter          30px
        )
    ),
    medium(
        options (
            columns         12,
            suffix          'm',
            breakpoint      $m,
            gutter          30px
        )
    ),
    large(
        options (
            columns         12,
            suffix          'l',
            breakpoint      $l,
            gutter          30px
        )
    )

);
 */

SassMeister-output.css

/**
 * libsass list manipulation problem
 * I am using the following code as a crude example.
 * the real world application I am trying to achieve
 * is providing grid system setup via a single $args array.
 */
/**
 * Sass-lib-maps polyfill for sass 3.3+ list map
 * support in libsass 2.0.0
 */
/**
 * Basic multidimensional array, not the most practical
 * real world example but it does a good job of
 * illustrating the problem
 */
/**
 * Trying to use sass @each to walk through the above
 * array '$items'. As you can see from the output the
 * map-get function returns a null value.
 */
/**
  * Couldn't get this to work. One point to tackle is to extend sass-list-maps
  * to be able to handle multi dimensional lists.
  * Another approach is listed farther below
  */
.rule {
  width: null;
  width: null;
  width: null; }

/**
 * Lets make sure that the map-get function works
 * as expected outside the @each loop.
 * 
 */
.rule2 {
  width: 10px;
  height: 20px; }

/**
 * New setup of grid variables
 */
/**
 * Create a list of lists
 */
/**
 * The .grid class is obviously bogus and non-functional but it is here to demonstrate
 * that we can go through mutliple lists. I would place the grid calculations in 
 * here and use it like this
 */
.grid {
  columns: 6;
  suffix: null;
  breakpoint: null;
  gutter: 30px;
  columns: 12;
  suffix: 'm';
  breakpoint: "some value";
  gutter: 30px;
  columns: 12;
  suffix: 'l';
  breakpoint: "large breakpoint";
  gutter: 30px; }

/**
 * Real world array(list) I would like to use.
 * As the first children of the list are dynamic 
 * I need to be able to walk through with @each.
 */
/**
 $grid_args:(

    default(
        options (
            columns         6,
            suffix          null,
            breakpoint      null,
            gutter          30px
        )
    ),
    medium(
        options (
            columns         12,
            suffix          'm',
            breakpoint      $m,
            gutter          30px
        )
    ),
    large(
        options (
            columns         12,
            suffix          'l',
            breakpoint      $l,
            gutter          30px
        )
    )

);
 */