6

我有一个 SCSS 项目，它通过 Compass 建立在 Foundation 之上。它定义了一组 sass 变量，然后根据这些变量定义了一堆规则：（我的项目有更多的变量设置和导入语句；这被简化了。）

vars.scss：

$foo = #fafafa
$bar = 14px;

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

然后我使用 compass 编译vars.scss，这组 sass 变量的一切都很好。但是，我还希望能够对我的应用程序进行不同的主题化，并通过定义一组可以覆盖原始变量的新变量来生成不同的主题：

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';

应用程序.scss：

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

并为特定主题覆盖它，您将创建一个如下所示的文件：

主题2.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"

（显然，这有点手忙脚乱，但希望你能明白。）

有没有办法做到这一点？还是我将不得不求助于把手或其他一些模板语言？

4

2 回答 2

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 任务添加一个参数，并使该主题名称动态化！

于 2015-03-28T13:31:18.363 回答
0

您总是可以生成一个临时文件发送到指南针。使用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。

于 2013-02-15T12:40:31.933 回答