基于环境设置的 Sass 条件答案

【问题标题】：Sass Conditionals Based on Environment Setting基于环境设置的 Sass 条件
【发布时间】：2013-01-30 10:34:25
【问题描述】：

在 Compass config.rb 文件中，您可以将 environment 设置为 :development 或 :production。

是否可以在 Sass 条件句中使用此设置？这是我想做的：

@if (environment === :development) {
    @import 'debug';
}

已解决：我在起草问题时找到了答案。无论如何都会发布，因为我没有找到任何明确的解释。

【问题讨论】：

标签： sass compass-sass

【解决方案1】：

这可以通过将环境信息存储在动态生成的 SCSS 文件中来完成（当 Compass 不可用时），然后可以在需要该信息的任何地方导入该文件。这应该在 SASS 编译器启动之前完成。

这是构建脚本的样子（即build.sh）：

#!/bin/bash

echo "\$ENV: 'production';" > ./_sass/env.scss

../node_modules/.bin/node-sass ./_sass/style.scss   ../_site/css/style.css --source-map=true

这个 SCSS 文件可以这样使用：

@import 'env';

@if ($ENV == 'production') {
   ...
   // some SCSS styling to be used in production only
   ...
}

【讨论】：

【解决方案2】：

部分感谢 Compass 存储库中的 this issue，我发现您可以像这样在 Sass 中使用基于设置的条件：

@if compass-env() == 'development' {
    body {
        color: red;
    }
}

确认这适用于 Sass 3.2.5 + Compass 0.12.2 + Ruby 1.9.3p194。

但是你不能这样做：

@if compass-env() == 'development' {
    @import 'debug';
}

这会引发语法错误：“导入指令不能在控制指令或 mixins 中使用。

所以解决方法是 @import 文件，然后将其全部内容包装在有条件的环境中。

【讨论】：