This question already has answers here:
Is there a way to import variables from javascript to sass or vice versa?

(8个答案)


5年前关闭。




我在Sass中有一个变量,该变量确定应该为我的网格系统在1 columns中容纳多少row

通常,这些是12 columns

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

如果是这样,它将隐藏整行。

该函数如下所示:
function checkColumns() {
    var maxColumns = 12;
    $('.row').each(function () {
        var elementsLength = $(this).children('.column').length;
        if (elementsLength > maxColumns) {
            $(this).remove();
        }
    });
}

有什么方法可以将maxColumns变量更改为与我的sass变量相同的数字?除此之外,每次我更改sass文件中的数字时都要手动更改它。

最佳答案

刚刚在今天早上在这里见过: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

10-07 16:03
查看更多