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:


Import-CSS-to-Sass-installing-gem

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:


Import-CSS-to-Sass-compass-create

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' 


Import-CSS-to-Sass-editing-config

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


Import-CSS-to-Sass-folder

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" 


Import-CSS-to-Sass-import-old-style

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


Import-CSS-to-Sass-new-style

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


Import-CSS-to-Sass-imported-file

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.

 

Categories: