How can I use Sass variables in a JavaScript function? [duplicate]

Question

I have a variable in Sass which determines how many columns are supposed to fit in 1 row for my grid system.

Normally, those are 12 columns.

In JavaScript I've got a function which checks if there are more then 12 columns in a row.

If so, it hides the whole row.

This function looks like this:

function checkColumns() {
    var maxColumns = 12;
    $('.row').each(function () {
        var elementsLength = $(this).children('.column').length;
        if (elementsLength > maxColumns) {
            $(this).remove();
        }
    });
}

Is there any way to change the maxColumns variable to the same number which is in my sass variables? Besides then changing it manually every time I change the number in my sass file.

Answer 1

Just seen this earlier this morning here: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json

First you need to include: https://github.com/vigetlabs/sass-json-vars

Install the gem:

gem install sass-json-vars

Place the variables in a json file

// variables.json
{
    "font-sans": "Helvetica, sans-serif",
    "colors": {
        "red": "#c33"
    }
}

Import the file in Sass to expose variable names:

@import "variables.json"

body {
    color: map-get($colors, red);
    font: $font-sans;
}

Require sass-json-vars when compiling

sass style.scss -r sass-json-vars