如何在JavaScript函数中使用Sass变量？ [重复]

Question

这个问题在这里已有答案：

• 有没有办法将变量从javascript导入sass，反之亦然？ 8个答案

我在Sass中有一个变量，它确定我的网格系统应该在1 row放入多少columns 。

通常，这些是12 columns 。

在JavaScript中，我有一个函数可以检查row是否有超过12 column 。

如果是这样，它会隐藏整行。

这个函数看起来像这样：

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