How can I use Sass variables in a JavaScript function?

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.

You can, in certain cases - but it's complicated. Read this, for starters: http://css-tricks.com/making-sass-talk-to-javascript-with-json/ — Paul Roub, Jun 12 '14 at 14:07
This sounds like an [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). It would be more efficient to prevent more than 12 columns from existing in the first place. — cimmanon, Jun 12 '14 at 14:19
@cimmanon That's commonplace for typographic grid systems :-) But I agree that I've never seen Javascript needing to care about the page's grid structure. — Kos, Jun 12 '14 at 14:19
@Kos The OP is just discarding the information, though. Why send the user the information if you're just going to delete it if it can't/won't fit. It would be a different thing entirely if they were moving it (and even if they were, there are more efficient ways of going about doing so). — cimmanon, Jun 12 '14 at 14:25

score 7 · Accepted Answer · answered Jun 12 '14 at 14:09

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

thanks, but this does only work in the main file wich you are compiling right? Not in other imports? — Bas, Jun 16 '14 at 16:43

How can I use Sass variables in a JavaScript function?

1 Answers1