Search code examples
sasscompass-sass

Sass Conditionals Based on Environment Setting


In a Compass config.rb file, you can set the environment to :development or :production.

Is it possible to use this setting in Sass conditionals? Here's what I want to do:

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

Solved: I found the answer while drafting my question. Will post anyway since I didn't find anything definitive that actually explains this.


Solution

  • Thanks in part to this issue in the Compass repository, I found that you can use settings-based conditionals in Sass like this:

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

    Confirmed this works with Sass 3.2.5 + Compass 0.12.2 + Ruby 1.9.3p194.

    However you can't do this:

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

    That throws a Syntax Error: "Import directives may not be used within control directives or mixins.

    So the workaround is to @import the file and then wrap its entire contents in the environment conditional.