Integrating SAAS + COMPASS with Eclipse for CSS Generation

 Step 1:

Download and run ruby installer program.

 

 

Step 2:

Install compass using the command line – ‘gem install compass’

Compass Integration into Eclipse
Step 1:

Run this command in the project main folder to get the ruby configuration file created.

compass create . --bare --sass-dir "<<SASS folder>>" --css-dir "<<CSS Folder>>" --javascripts-dir "assets/js" --i "<<Javascript folder>>"

Step 2:

Create a compass program for the project.

Go to Project à Properties à Builders à Click ‘New’ to create a new program for the builder.

Step 3:

Give any name for the Program like ‘Compass_Program_Builder’.

Under the Main tab, update the Location, arguments and working directory options.

Location – Location of the compass.bat file in the system

Working Directory – Eclipse project root directory where you have generated the ruby configuration file.

Argument – write compile in the arguments section.

Step 4:

Under Refresh tab, select ‘Refresh resources upon completion.’ checkbox.

Select ‘Specific resources’ radio button and click on the ‘Specify Resources…’ button to select the folder.

Select the ‘CSS’ folder whether you want the css files to be generated automatically on creation/updation of sass/scss programs in the workspace.

Step 5:

Under ‘Environment’ tab add a new environment variable ‘Path’ with value as the location of the Ruby bin folder.

Step 6:

Under ‘Build Options’ tab, select the corresponding checkboxes and specify the resources which needs to be updated during build.

 ‘Allocate console‘ [checked] so we can see the results in the console panel

Run the builder: [After a clean], [During manual builds], and [During auto builds].

‘Specify working set of relevant resources‘ [checked] – set this to the sass source folders – in my case, [Webcontent/sass]. Any changes found in this folder will trigger this builder.

Sample SASS and the generated CSS File

Once the setup is done, whenever you  create or update any .scss or .sass files under ‘SASS’ folder, compass will compile the file and automatically generates the .css and updates it in the ‘CSS’ folder.

That's all folks.. :)