如何在JavaScript函数中使用Sass变量？

Question

我在Sass中有一个变量,用于确定我的网格系统columns中应该有多少个变量row.

通常,那些是12 columns.

在JavaScript中,我有一个函数可以检查a中是否有超过12 column秒row.

如果是这样,它会隐藏整行.

这个函数看起来像这样:

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

有没有办法将maxColumns变量更改为我的sass变量中的相同数字？除了每次更改我的sass文件中的数字时手动更改它.

Answer 1

刚刚今天早上在这里看到:http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json

首先,您需要包括:https://github.com/vigetlabs/sass-json-vars

安装gem:

gem install sass-json-vars

将变量放在json文件中

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

在Sass中导入文件以公开变量名称:

@import "variables.json"

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

编译时需要sass-json-vars

sass style.scss -r sass-json-vars