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

Are you joining the containers revolution? Start leveraging container management using Platform9's ultimate guide to Kubernetes deployment.

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

Using Containers? Read our Kubernetes Comparison eBook to learn the positives and negatives of Kubernetes, Mesos, Docker Swarm and EC2 Container Services.

Topics:

Published at DZone with permission of Sandeep Patel, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}