
With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS outputÂ
file. What about the regular CSS files? According to thisÂ
documentation all files withÂ
.css
 extension, it will be compiled to a CSS @import rule.
For example, if style.scss contains:
@import "../../bower_components/animate.css/animate.css";
… it will be compiled to:
@import url(../../bower_components/animate.css/animate.css);
This is not what we want if we are aiming to utilize the minify and merge features of SASS and Compass. Some will rename theÂ
.css
 fileextension toÂ
.scss
 as workaround. But if we are using a package manager like Bower, renaming the file extension is strongly not recommended. This article will show solution to this issue:
In your project folder, createÂ
mylib.rb
 file and copy the following codes in this file:
require "sass/importers"
class Sass::Importers::Filesystem
alias :css_importer :extensions
def extensions
css_importer.merge('css' => :scss)
end
end
Now we can import regular CSSÂ file(s) in our SASS files. Example if we want to importÂ
../../bower_components/animate.css/animate.css
 we will write it in SASS file without theÂ
.css
 extension:
@import "../../bower_components/animate.css/animate";
To use our custom ruby library with the compass command line, execute:
compass compile assets/sass/style.scss -r ./mylib.rb
If you are using grunt, you can use the following codes as the reference for yourÂ
gruntfile.js
:
odule.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
compass: {
prod: {
options: {
config: 'config.rb',
require: './mylib',
environment: 'production',
sourcemap: true
} // options
}, // prod
dev: {
options: {
config: 'config.rb',
require: './mylib',
sourcemap: true
} // options
} // dev
}, // compass
watch: {
sass: {
files: [
'assets/sass/*.scss'
],
tasks: ['compass:dev']
} // sass
} // watch
}); // initConfig
grunt.registerTask('default', 'watch');
grunt.registerTask('prod', ['compass:prod']);
} // exports
Thanks for the useful tips Anish. Keep posting. I can always recommend CodeHints.
Thankyou joel for your support.