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

<分区>

我在 Sass 中有一个变量，它确定我的网格系统的 1 个行 中应该容纳多少个列。

通常，这些是 12 个列。

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

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

这个函数看起来像这样:

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

关于javascript - 如何在 JavaScript 函数中使用 Sass 变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24186431/

上一篇：javascript - 在 Eclipse 中禁用检查特定的 JavaScript 错误

下一篇：javascript - 使用 Sinon 测试 JavaScript 点击事件

javascript - 计算点击的复选框，即使在刷新后

html - 为什么 bottom 和 right 不相应地工作？

html - CSS - Div焦点改变蓝色边框高亮颜色

javascript - 'Single Item' 的 React 方式是什么？

javascript - 在 JavaScript 中通过 MySql 验证输入

javascript - 如何让我的 JavaScript 在中继器中工作？

Javascript 通过标签 ID 跟踪页面中的标签总数 (<div>)

css - 是否有任何基于拖放式 CSS 的布局生成工具？

javascript - 使用 localStorage 在 SenchaTouch/PhoneGap -App 中保存/加载设置并以表单形式显示