Created
September 30, 2014 03:17
-
-
Save kianoshp/7ebd4262318974798b7a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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. | |
*/ | |
.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}); | |
} | |
} | |
$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 | |
); | |
$gridList: $default $medium $large; | |
$gridKeys: "columns" "suffix" "breakpoint" "gutter"; | |
.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 | |
) | |
) | |
); | |
*/ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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. | |
*/ | |
.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; } | |
.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 | |
) | |
) | |
); | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment