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?

3 Answers 3

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.

1
  • Great answer! Have wasted so much time on this! Thanks!
    – Hao Chang
    Commented Aug 26, 2015 at 11:38
1

Sounds like this has been fixed in 3.4.18.

1
  • Yes, just tested it. Works again in 3.4.18. Thanks!
    – Hao Chang
    Commented Aug 29, 2015 at 5:59
0

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

1
  • No if it is another css resource (in the form of a URL) it is importing, I guess.
    – Hao Chang
    Commented Aug 25, 2015 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.