Posted on 03.07.2013 by Rajib

If you are looking to use Sass and Compass for new Project or thinking about writing your Old CSS in the Sass-way, then there is a new Sass/Compass Plugin called sass-css-importer by Christopher M. Eppstein, the same Guy who wrote Compass.

What this plugin basically does is let you import your old/already existing CSS files to the new Sass project. This is just plain awesome, one line of code can save you thousands line of coding in Sass.

At first we need to install the Gem (oh Ruby),

gem install --pre sass-css-importer 

The output should be something like:


Lets see this by creating a new project in Compass

 compass create css-importer 

It creates some folders and files defined in the default Compass configuration. I get the following output:


After that we have to edit config.rb file to use CSS-Importer.

 vi config.rb 

I added this line at the last of the config file

 require 'sass-css-importer' 


and saved it.

Now, I copied my Old CSS folder/file to the css-importer folder (just to have a copy nearby). My old-css folder contains just one file called old-style.css


I started a new SCSS file inside sass folder called style.scss. To import the Styles from my old-styles.css file I just wrote a single line of code in style.scss

 @import "CSS:../old-css/old-style" 


After saving this file, I started Compass to compile my SCSS


Compass created new CSS file called style.css in stylesheets directory. Lets see, what does that file contains


This is just basic CSS file for demonstration, and the comment lines shows where was it imported from.

Hence, I could import my old css files by using this new Sass-Css-Importer so easily.