- COMPASS is an SASS based css authoring framework which simplifies a CSS authoring.
- For more detail about COMPASS you can go through my previous post.
- In this Demo, “We will see how to integrate the compass into Eclipse and Use it in a Java based dynamic web project”.
- I assume that Ruby and Compass is already installed in your system or else you can refer my previous post to know about installation of compass in your machine.
- Let’s create Dynamic Web project “DemoApp“.Bellow screenshot shows a basic structure of a an eclipse based dynamic web project:-
- Lets create a folder structure “asset” >>”sass” inside the WebContent and put our SCSS file(my-style.scss) inside the sass folder.Below screenshot shows the modified project structure:-
- Now We will go for creating a “Builder” in Eclipse.This option you can find on project “properties“. Bellow screenshot shows that option:-
- Select the “New” button for creating a new builder.It will open pop up window.Then select the “program” option from there.Below screenshot shows the window:-
- Select the Program and press the “OK” button.It will open up a new window for configuring a new builder.This window will look like below:-
- Please fill the name of the builder,In this demo i have named it as “compass“.In the “Location” field set the path of installed compass from your machine.The below screenshot demonstrate this for my machine:-
- The next field in “Working Directory“.To fill this field use “Browse workspace” option and select the “asset” folder from your project.Below screenshot shows this step for our demo project ,
- The next field is “Arguments“. Write ‘compile’ inside the text area.The filled up window will be similar to below screenshot,
- Then press “OK” button.You can see a new builder ‘compass‘ is listed on builder list.Below screenshot shows the builder list:-
- Press “OK” and check the “Build Automatically” option from the “Project” menu in Eclipse.Below screenshot shows this step,
- Now use the “Build” or “CTRL+B” for building the project.You can see the console will log some messages like creating a new directory ‘stylesheets‘ and a file ‘my-style.css‘. Below screenshot shows the console log from eclipse,
- So from above it is clear that the compass is integrated and can be called by building the project.So next time onwards you can call build to generate the new CSS from SCSS file.Below screenshot shows the project structure will have the new directory ‘stylesheet‘ and generated CSS file,
