1

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?

Hao Chang
  • 355
  • 2
  • 3
  • 12

3 Answers3

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.

Dragan Malinovic
  • 603
  • 6
  • 12
1

Sounds like this has been fixed in 3.4.18.

Ryan DeBeasi
  • 256
  • 1
  • 6
0

Shouldn't compass be rendering the imported file's code as css?

PAT-O-MATION
  • 1,907
  • 1
  • 20
  • 20