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

时间:2016-03-22 19:38:11

标签: dynamic build sass gulp

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

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

IsPool == False

有什么想法可以做到这一点?

谢谢,

2 个答案:

答案 0 :(得分:1)

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

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

例如:

SASS档案

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

body {
  background: $body-background;
}

<强> GULP

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))
    }
});

答案 1 :(得分:0)

我遇到了这项服务https://www.grooveui.com,可让您从SASS文件中创建多个主题。

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

值得一试。