Compass removes semicolon when compressing SCSS files, causing issue of CSS importing

Question

It is my first time trying out Compass and encountered an issue around how Compass compressed SCSS files.

I had a simple .scss file with the following code:

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

.fa-apple, .fa-android, .fa-twitter {
    font-size: 60px;
}

I set up a Gulp task to compile the file and here is the task:

gulp.task('compass', function() {
    gulp.src('app/scss/style.scss')
        .pipe(compass({
            config_file: './config.rb',
            css: 'app/css',
            sass: 'app/scss',
            require: ['susy', 'breakpoint']
        }))
        .pipe(gulp.dest('app/css'));
});

And this is my config.rb:

require 'susy'
require 'breakpoint'

project_type = :stand_alone
http_path = "/"
sass_dir = "app/scss"
css_dir = "app/css"
images_dir = "app/images"
fonts_dir = "app/fonts"
javascript_dir = "app/js"
line_comments = true
preferred_syntax = :scss
output_style = :compressed
relative_assets = true

So I set the output_style to :compressed to minified the CSS result. This is what I got in the result css file:

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css").fa-apple,.fa-android,.fa-twitter{font-size:60px}

Compass removed the ending semicolon of the @import statement, which results in unexpected styling on the page.

When I changed output_style to :expanded, the page worked well with the unminified css version as the the semicolon was kept.

Is there a way to avoid Compass from removing the semicolon? And also why should it happen?

Answer 1

It seems that newest version (3.4.17 or 3.4.18) of sass is doing this.

Try this:

gem uninstall sass
gem install sass -v 3.4.16

It worked for me. Here you can find all versions of sass if you want to try some other version.