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

SASS的开发人员似乎在考虑viability of this request时遇到了问题。

以下是请求该功能的人：

然而，少支持它并将其记录得很好：http://lesscss.org/features/#variables-feature-import-statements

Answer 2

对于使用Grunt编译SCSS / SASS文件的人，解决方案是在“sass”任务配置中添加额外的参数 loadPath ，如下所示：

sass: {
  options: {
    loadPath: ['../src/css/themes/myTheme/'],
    style: 'nested',
    precision: 2
  },

然后在/src/css/import.scss中，您可以包含主题中的那些文件，就好像它们位于当前目录中一样：

@import "config";

该文件包含在/src/css/themes/myTheme/config.scss中。

注意：您当然可以向Grunt任务添加一个参数，并使该主题名称动态化！

Answer 3

您始终可以生成发送到指南针的临时文件。使用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。

SCSS / Compass的动态导入？

3 个答案: