sass - 環境設定に基づくSass条件

Question

コンパスファイルでは、またはconfig.rbを設定できます。environment:development:production

この設定をSass条件で使用することは可能ですか？これが私がやりたいことです：

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

解決済み：質問の作成中に答えを見つけました。これを実際に説明する決定的なものは何も見つからなかったので、とにかく投稿します。

Answer 1

Compassリポジトリのこの問題のおかげで、Sassで次のような設定ベースの条件を使用できることがわかりました。

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

これがSass3.2.5+ Compass 0.12.2 +Ruby1.9.3p194で動作することを確認しました。

ただし、これを行うことはできません。

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

これにより、構文エラーがスローされます。「インポートディレクティブは、コントロールディレクティブまたはミックスイン内で使用できません。

したがって、回避策は@importファイルに対してであり、その内容全体を環境条件付きでラップします。

Answer 2

これは、動的に生成された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
   ...
}