来自服务器端语言的动态 SASS 变量答案

【问题标题】：Dynamic SASS variables from a server side language来自服务器端语言的动态 SASS 变量
【发布时间】：2016-03-22 19:38:11
【问题描述】：

我有一个包含颜色变量列表的数据库表（例如 HEX 颜色代码）。我的样式是使用 Gulp 和 SASS 编译的。

当我的 Django 应用程序在数据库中创建/更新一行时，我需要根据颜色构建一个新的样式表。不知何故，我需要从我的服务器端应用程序中获取颜色到构建过程中。

Record with colours added -> Gulp runs -> New colour variables are used within the stylesheet generation.

任何想法如何做到这一点？

谢谢，

【问题讨论】：

你有没有尝试过？ 任何东西？
我之前做过各种构建过程，但从未在 vars 中传输。我正在寻找以前可能解决过这个问题的人的正确方向。编辑 - 我还在 Gulp 构建过程中看到了各种数据注入技术，但似乎没有一个适合该模型。 Gulp-data 更有希望。

标签： dynamic build sass gulp

【解决方案1】：

我以不太理想的方式解决了这个问题..

有一个名为 gulp-preprocess 的模块，它接受一个上下文数组并在 sass 进程运行之前替换 vars..

例如：

SASS 文件

$body-background: '/* @echo body-background */';

body {
  background: $body-background;
}

咕噜咕噜

var data = {
    '1': {
        'body-background': '#f00',
    },
    '2': {
        'body-background': '#ffffff',
    }
}

gulp.task('scss', function () {

    for (var partner_id in data) {
        if (!data.hasOwnProperty(partner_id)) continue;
        var partner_data = data[partner_id]

        gulp.src('./static/scss/*.scss')
            .pipe($.sourcemaps.init())
            .pipe($.preprocess({context: partner_data}))
            .pipe($.sass({
                    errLogToConsole: true,
                    style: 'compact'
                })
                .on('error', function (err) {
                    console.log('Error:', err);
                    this.emit('end');
                }))
            .pipe($.autoprefixer({cascade: false}))
            .pipe($.cssnano())
            .pipe($.sourcemaps.write('./maps'))
            .pipe(gulp.dest('./static/css/'+ partner_id))
    }
});

【讨论】：

【解决方案2】：

我遇到了这个服务https://www.grooveui.com，它可以让你从你的 SASS 文件中创建多个主题。

唯一的问题是您必须使用它们托管您的 SASS 文件。然后您可以创建新主题并设置变量值。我猜他们正在使用数据库来存储变量并生成多个 SASS 文件。

值得一试。

【讨论】：