SCSS variable within @include (Foundation 5)

Question

Using Foundation 5 and writing semantic grid / column markup through SCSS. To make things simple I divided each WordPress page with div[role="page/index/404/single"] and I'm appending the @include grid-row() and @include grid-column() to the corresponding semantic HTML markup.

I've devised a simple SCSS array to handle my variables in one go but I am having parsing issues.

$columns: ( 'article': 9, 'aside': 3, 'full-width': 12, 'none': 0 );

// index.php
div[role="index"] {
    // row
    main {
        @include grid-row();
        // column
        article {
            @include grid-column(columns('article'));
        }
        // sidebar
        aside {
            @include grid-column(columns('aside'));
        }
    }
}

I am receiving this error, which I fully understand, but how can I make this work??? I'm out of ideas.

column("article")/12 is not a unitless number for "percentage"

If this issue cannot be solved let me know. Would be a pain to manually define integers throughout my code for every site but I'll deal with it if I have to.

Answer 1

You need to use the following syntax to access your Sass array (you are technically using a Sass map).

@include grid-column(#{map-get($columns, 'article')});
@include grid-column(#{map-get($columns, 'aside')});

More info: http://www.sitepoint.com/using-sass-maps/