Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Configuring Compass In Eclipse For Java Web Project

DZone's Guide to

Configuring Compass In Eclipse For Java Web Project

· Java Zone ·
Free Resource

Get the Edge with a Professional Java IDE. 30-day free trial.

  • 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 sassfolder.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,

Get the Java IDE that understands code & makes developing enjoyable. Level up your code with IntelliJ IDEA. Download the free trial.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}