{"action":"closed","issue":{"url":"https://api.github.com/repos/roikles/Flexbones/issues/38","labels_url":"https://api.github.com/repos/roikles/Flexbones/issues/38/labels{/name}","comments_url":"https://api.github.com/repos/roikles/Flexbones/issues/38/comments","events_url":"https://api.github.com/repos/roikles/Flexbones/issues/38/events","html_url":"https://github.com/roikles/Flexbones/issues/38","id":109977711,"number":38,"title":"Gridtacular broken in Sass > 3.0","user":{"login":"roikles","id":878484,"avatar_url":"https://avatars.githubusercontent.com/u/878484?v=3","gravatar_id":"","url":"https://api.github.com/users/roikles","html_url":"https://github.com/roikles","followers_url":"https://api.github.com/users/roikles/followers","following_url":"https://api.github.com/users/roikles/following{/other_user}","gists_url":"https://api.github.com/users/roikles/gists{/gist_id}","starred_url":"https://api.github.com/users/roikles/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roikles/subscriptions","organizations_url":"https://api.github.com/users/roikles/orgs","repos_url":"https://api.github.com/users/roikles/repos","events_url":"https://api.github.com/users/roikles/events{/privacy}","received_events_url":"https://api.github.com/users/roikles/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-06T10:17:01Z","updated_at":"2015-12-22T11:56:02Z","closed_at":"2015-12-22T11:56:01Z","body":"The syntax appears to have changed with regards to adding to an array so here is a proposed fix: \r\n\r\n```\r\n////\r\n// Gridtacular\r\n////\r\n\r\n\r\n////\r\n// Map Get Z\r\n//\r\n// A cleaner way to deal with nested map values.\r\n// Created by lunelson [https://github.com/lunelson/sass-list-maps]\r\n//\r\n// @arg {map} $list - provide a Sass map to be traversed\r\n// @arg {array} $keys... - provide the array keys per depth comma seperated\r\n// \r\n// @example scss - Map Get Z\r\n//     map-get-z(map, first-child-key, second-child-key);\r\n////\r\n@function map-get-z($list, $keys...) {\r\n  @if $list == null { @return $list; }\r\n  $length: length($keys);\r\n  $list: map-get($list, nth($keys, 1));\r\n  @if $length > 1 {\r\n    @for $n from 2 through $length {\r\n      @if $list == null { @return $list; }\r\n      $list: map-get($list, nth($keys, $n));\r\n    }\r\n    @return $list;\r\n  }\r\n  @return $list;\r\n}\r\n\r\n////\r\n// Column Width\r\n// \r\n// Works out the percent width of columns (gutters can be \r\n// any unit but columns are always percent bases)\r\n// \r\n// @arg {int} $list - provide a Sass map to be traversed\r\n// @arg {int} $keys... - provide the array keys per depth comma seperated\r\n// \r\n// @example scss - Map Get Z\r\n//     map-get-z(map, first-child-key, second-child-key);\r\n////\r\n@function column-width($number_of_columns,$total_columns) {\r\n    $single_col_width: 100 / $total_columns * 1%;\r\n    @return $single_col_width * $number_of_columns;\r\n}\r\n\r\n\r\n//// \r\n// At Breakpoint\r\n// \r\n// A mixin for outputting inline media queries\r\n// Just supply a Sass list as an argument with a min/max\r\n// If there are no min and max values supplied then it \r\n// doesnt ouput a media query\r\n////\r\n@mixin at-breakpoint($min,$max:null){\r\n    @if($max == null and $min != null){\r\n        @media (min-width: $min){\r\n            @content;\r\n        }\r\n    } @elseif($min == null and $max == null) {\r\n        @content;\r\n    } @else{\r\n         @media (min-width: $min) and (max-width: $max){\r\n            @content;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n////\r\n// Span Columns\r\n// \r\n// Used to set grids semantically from within \r\n// the stylesheet with no additional HTML markup\r\n////\r\n@mixin span-columns($columns, $total_columns){\r\n    width: column-width($columns,$total_columns);\r\n    padding-left: $gutter-width; \r\n}\r\n\r\n\r\n////\r\n// Grid\r\n//\r\n// Called once per breakpoint as the gutters may be different\r\n// Float all direct children of the grid.\r\n// Adds negative padding to each row\r\n// Display flex and flex-wrap are used here to prevent content from \r\n// floating into above elements\r\n////\r\n@mixin grid($gutter){\r\n    .grid{\r\n        display: block;\r\n        margin-left: -$gutter;\r\n        @include clearfix();\r\n    }\r\n\r\n        // Float children\r\n        .grid > * {\r\n            float: left;\r\n            position: relative;\r\n            padding-left: $gutter;\r\n        }\r\n\r\n}\r\n\r\n////\r\n// Grid with no gutters\r\n////\r\n@mixin grid-no-gutter($column_class,$suffix: null){\r\n    .grid--no-gutter#{$suffix}{\r\n        margin-left: 0;\r\n    }\r\n\r\n        // Float children\r\n        .grid--no-gutter#{$suffix} > * {\r\n            padding-left: 0;\r\n        }\r\n}\r\n\r\n////\r\n// Equivalent Fractions\r\n//\r\n// This function will add additional classes\r\n// to make the grid system more expressive.\r\n// Instead of writing 4/12 you can also write 1/3\r\n////\r\n@function equivalent-fractions($numerator,$denominator){\r\n    $fractions: ();\r\n    @for $i from -$numerator through -1{\r\n        @if($numerator % abs($i) == 0 and $denominator % abs($i) == 0){\r\n            $fraction: (abs($i): #{$numerator/abs($i)}-#{$denominator/abs($i)});\r\n            $fractions: map-merge($fractions, $fraction);\r\n        }     \r\n    }\r\n    // return map of all fractions\r\n    @return $fractions;\r\n}\r\n\r\n////\r\n// Grid Columns\r\n// \r\n// Set the grid column widths based on the number of \r\n// columns divided by the total number of columns.\r\n////\r\n@mixin grid-columns($prefix: null, $suffix: null, $columns: null, $fifths: false, $sevenths: false){\r\n    // Loop through the total grid columns\r\n    \r\n    @for $i from 1 through $columns{\r\n        $css_classes: equivalent-fractions($i,$columns);\r\n        $column_class: ();\r\n        \r\n        // Generate classes from Equivilant fractions\r\n\r\n        @each $key, $css_class in $css_classes{\r\n            $full_css_class: #{$prefix}#{$css-class}#{$suffix};\r\n            $column_class: append($column_class, $full_css_class, comma);\r\n        }\r\n        \r\n        // Output column classes\r\n\r\n        #{$column_class}{\r\n            width: column-width($i,$columns);\r\n        }\r\n    }\r\n\r\n    // Add fifths where total columns dont divide into fifths.\r\n    \r\n    @if($fifths == true){\r\n        @for $i from 1 through 5{\r\n            $fifth_class: #{$prefix}#{$i}-5#{$suffix};\r\n\r\n            #{$fifth_class}{\r\n                width: column-width($i,5);\r\n            }\r\n        }\r\n    }\r\n\r\n    // Add sevenths where total columns dont divide into sevenths.\r\n    \r\n    @if($sevenths == true){\r\n        @for $i from 1 through 7{\r\n            $seventh_class: #{$prefix}#{$i}-7#{$suffix};\r\n\r\n            #{$seventh_class}{\r\n                width: column-width($i,7);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n////\r\n// Push Class\r\n//\r\n// Set the push classes that will incrementally indent\r\n// the column by a maximum number of total-columns -1\r\n////\r\n@mixin grid-push($prefix: null, $suffix: null, $columns: null){\r\n    @for $i from 1 through $columns - 1{\r\n        $css_classes: equivalent-fractions($i,$columns);\r\n        $push_class: ();\r\n        \r\n        @each $key, $css_class in $css_classes{\r\n            $full_css_class: #{$prefix}#{$css_class}#{$suffix};\r\n            $push_class: append($push_class, $full_css_class, comma);\r\n        }\r\n        \r\n        #{$push_class}{\r\n            margin-left: column-width($i,$columns);\r\n        }\r\n\r\n    }\r\n}\r\n\r\n////\r\n// Omega class\r\n//\r\n// An omega declaration that is breakpoint specific\r\n// Basically it floats an element to the right taking\r\n// it out of order potentially.\r\n////\r\n@mixin grid-omega($prefix: null, $suffix: null){\r\n    #{$prefix}omega#{$suffix} {\r\n        float: right;\r\n    }\r\n}\r\n\r\n////\r\n// Debug \r\n//\r\n// Outputs the current breakpoint name to quickly debug \r\n// each breakpoint.\r\n////\r\n@mixin grid-debug($breakpoint_name,$debug_bg: #000){\r\n    body:after{\r\n        position: fixed;\r\n        display: block;\r\n        bottom: 10px;\r\n        right: 10px;\r\n        padding: 5px 20px;\r\n        font-size: 14px;\r\n        font-weight: bold;\r\n        color: white;\r\n        background: $debug_bg;\r\n        content: \"#{$breakpoint_name}\";\r\n    }\r\n}\r\n\r\n////\r\n// Grid Generate\r\n//\r\n// Pulls the whole thing together ready for output\r\n// kept seperate from grid-generate as it is DRYer \r\n// this way.\r\n////\r\n@mixin grid-generate($grid_args){\r\n     \r\n    // Set variable defaults\r\n\r\n    $default_column_name:   \"span--\";\r\n    $default_push:          false;\r\n    $default_push_name:     \"push--\";\r\n    $default_omega:         true;\r\n    $default_debug_display: false;\r\n    \r\n    // If columnclass has been defined\r\n    $column_name: if( map-has-key(map-get($grid_args, config), columnclass), map-get-z($grid_args, config, columnclass), $default_column_name );\r\n    \r\n    // If push has been defined\r\n    $push: if( map-has-key(map-get($grid_args, config), push), map-get-z($grid_args, config, push), $default_push );\r\n\r\n    // If pushclass has been defined\r\n    $push_name: if( map-has-key(map-get($grid_args, config), pushclass), map-get-z($grid_args, config, pushclass), $default_push_name );\r\n    \r\n    // If push has been defined\r\n    $omega: if( map-has-key(map-get($grid_args, config), omega), map-get-z($grid_args, config, omega), $default_omega );\r\n\r\n    // If debug has been defined\r\n    $debug_display: if( map-has-key(map-get($grid_args, config), debug),map-get-z($grid_args, config, debug), $default_debug_display );\r\n    \r\n    // Check that there are defined grids\r\n    \r\n    @if( map-has-key($grid_args, grids )) {\r\n        \r\n        // Grid default values\r\n        $grids:             map-get($grid_args, grids);\r\n        $column_prefix:     #{'.' + $column_name};\r\n        $push_prefix:       #{'.' + $push_name};\r\n        \r\n        @each $grid_name, $grid_map in $grids{\r\n\r\n            // Set defaults\r\n\r\n            $default_columns:           12;\r\n            $default_suffix:            null;\r\n            $default_breakpoint_min:    null;\r\n            $default_breakpoint_max:    null;\r\n            $default_gutter:            24px;\r\n            $default_fifths:            false;\r\n            $default_sevenths:          false;\r\n            $default_debug_bg:          #000;\r\n            $default_debug_name:        $grid_name;\r\n\r\n            // If column class has been defined\r\n            $columns: if( map-has-key($grid_map, columns), map-get($grid_map,columns), $default_columns );\r\n            \r\n            // If column class has been defined\r\n            $suffix: if( map-has-key($grid_map, suffix), map-get($grid_map,suffix), $default_suffix );\r\n            \r\n            // If column class has been defined\r\n            $breakpoint_min: if( map-has-key($grid_map, breakpoint_min), map-get($grid_map,breakpoint_min), $default_breakpoint_min );\r\n\r\n            // If column class has been defined\r\n            $breakpoint_max: if( map-has-key($grid_map, breakpoint_max), map-get($grid_map,breakpoint_max), $default_breakpoint_max );\r\n            \r\n            // If column class has been defined\r\n            $gutter: if( map-has-key($grid_map, gutter), map-get($grid_map,gutter), $default_gutter );\r\n        \r\n            // If fifths are enabled\r\n            $fifths: if( map-has-key($grid_map, fifths), map-get($grid_map,fifths), $default_fifths );\r\n\r\n            // If SEVENTHS are enabled\r\n            $sevenths: if( map-has-key($grid_map, sevenths), map-get($grid_map,sevenths), $default_sevenths );\r\n\r\n            // If debug background is defined\r\n            $debug_bg: if( map-has-key($grid_map, debug_bg), map-get($grid_map, debug_bg), $default_debug_bg );\r\n\r\n            // If debug name is defined\r\n            $debug_name: if( map-has-key($grid_map, debug_name), map-get($grid_map, debug_name), $default_debug_name );\r\n\r\n            // Include the necessary mixins to generate the grids\r\n            @include at-breakpoint($breakpoint_min, $breakpoint_max){\r\n                \r\n                @include grid($gutter);\r\n                @include grid-no-gutter($column_name,$suffix);\r\n                @include grid-columns($column_prefix,$suffix,$columns,$fifths,$sevenths);\r\n                \r\n                @if($push){\r\n                    @include grid-push($push_prefix, $suffix, $columns);\r\n                }\r\n                \r\n                @if($omega){\r\n                    @include grid-omega($column_prefix, $suffix);\r\n                }\r\n\r\n                @if($debug_display){ \r\n                    @include grid-debug($debug_name,$debug_bg) \r\n                } \r\n\r\n            }\r\n        }\r\n\r\n    } @else{\r\n        @error \"No Gridtacular grids defined!\";\r\n    }\r\n}\r\n```"}}