Sass Conditionals Based on Environment Setting

compass-sass, sass

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.

Problem

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.

Original source