SCSS/Compass的动态导入？

Question

我有一个SCSS项目,它建立在通过Compass的Foundation之上.它定义了一组sass变量,然后根据这些变量定义了一堆规则:(我的项目有更多变量设置和import语句;这是简化的.)

vars.scss:

$foo = #fafafa
$bar = 14px;

// rules using $foo and $bar
@import '_rules';

然后我用罗盘来编译vars.scss,对于那组sass变量来说一切都很棒.但是,我还希望能够以不同的方式对我的app进行主题化,并通过定义一组可以覆盖原始变量的新变量来生成不同的主题:

vars.scss:

$foo = #fafafa
$bar = 14px;

@import 'otherVars';

@import '_rules';

当我有70多个主题时,我无法手动编辑文件.(为了我的应用程序,有许多主题是必要的.)我真正想要的是能够做类似以下的事情:

vars.scss:

$foo = #fafafa
$bar = 14px;

@import '{{otherVars}}';

@import '_rules';

然后我可以称之为:

compass --otherVars themes/theme2

然后很容易将所有主题都删掉,因为我可以compass为每个主题调用一次.

SCSS允许你这样做吗？我调查了它,它看起来不像.

我目前的解决方法是将原始vars.scss拆分为前缀和后缀:

_app_prefix.scss:

$foo = #fafafa
$bar = 14px;

_app_suffix.scss:

@import '_rules';

app.scss:

@import '_app_prefix';
// no overrides by default
@import '_app_suffix';

要为特定主题覆盖它,您需要创建一个类似于以下内容的文件:

theme2.scss:

@import '_app_prefix';

// only override $foo - let the original value of $bar stand
$foo = #ebebeb;

@import '_app_suffix';

这是有效的,但有点痛苦,并引入了额外的样板.

我的下一个问题是希望有其他@import 'rules_foo'语句,这些语句也需要动态构建.所以我的整体幻想看起来像:

vars.scss:

$foo = #fafafa
$bar = 14px;

@import '{{otherVars}}';

@import '_rules';
{{ @import 'additional_rules' for additional_rules in rules }}

我可以打电话给:

compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3"

(显然这有点像手绘,但希望你能得到这个想法.)

有没有办法做到这一点？或者我将不得不诉诸车把或其他一些模板语言？

Answer 1

您始终可以生成一个临时文件并将其发送到指南针。用Python代码：

import sys
with open('tmp.scss', 'w') as out:
    out.write(("""
$foo = #fafafa
$bar = 14px;

@import '%(pre-rules)s';

@import '_rules';
%(post-rules)s
    """ % {'pre-rules': sys.argv[1], 'post-rules': '\n'.join(["@import '%s';" % x for x in sys.argv[2:]])}).strip())

你可以这样称呼它：

python stackoverflow.py themes/theme2 rules_1 rules_2 rules_3

它会使用您想要的输出创建/覆盖 tmp.scss 。