Question

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

通常，这些是12 columns。

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

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

此功能如下所示：

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

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

1 个答案: