[Solved]-Eclipse IDE and Sass-eclipse

an easy solution would be to use eclipse wild web developer:

https://github.com/eclipse/wildwebdeveloper#-get-it-now

the editor will simplify developing with web technologies. besides automatically compiling scss files to css files it provides many more features. check them out, i think you will like them.

i posted about this recently here: http://mikekelly.myblog.arts.ac.uk/2015/02/09/sass-with-eclipse-in-os-x/

my post refers to os x but it should be easy enough to adapt the process to other setups. here's the text from my post:

preparation

1. make sure ruby is installed. you’re going to need this as sass is a ruby app. os x should have ruby installed by default. to check, open a terminal window and enter:

ruby -v

this should display the version information, something like:

ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]

if you don’t have ruby, install it now. come back once you’ve figured it out.

if you develop using ruby at times, you are likely to be using rvm to manage different ruby versions. if you’re using rvm we need to take some precautions. don’t worry – we don’t need to get rid of rvm. we just need to make sure we install sass to the system version of ruby.

let’s check to see if we have rvm installed:

rvm -v

if we get version information back, then we have rvm. (if we don’t we can just move on to step 2 below.) let’s see which versions of ruby we have installed:

rvm list

this should show you a list of ruby versions, along with info. about which one is the default and which is the current version. we want to install sass to the os x default version of ruby, not the rvm-installed versions, so enter this:

rvm use system

and now check again on our current ruby version:

ruby -v

ok, if we’re happy that we have ruby and that we’re using the os x default ruby, let’s proceed.

2. install sass

do we have sass?

sass -v

if that doesn’t return version information, you will need to install sass:

gem install sass

if you get permission errors, use sudo:

sudo gem install sass

once you have installed sass, let’s check on its location:

which sass

that should return:

/usr/bin/sass

if a different path was returned, look again at the information above about rvm.

ok, now that we have sass installed in the os x default version of ruby, we can now switch back to a different version of ruby via rvm, if required.

set up a builder in your eclipse project

in eclipse, we’re going to use a builder to set up sass auto-compilation. ctrl-click on the title of your project in the explorer view (i’m working on a php project in this case, so i’m using the php explorer view.)

select properties.

click on builders, then on new… to make a new builder.

select the program option and click ok.

now we can give our builder a name, e.g. sass.compiler

in the main tab we need to put in the path to the installed sass application:

/usr/bin/sass

n.b. if you were using sass with an rvm-installed ruby, at this point you might have tried putting in something like:

/users/myusername/.rvm/gems/ruby-2.1.5/bin/sass

however that gives problems as sass then tries to find required resources but they're not in the path, and so the operation fails with the error:

sass env: ruby_executable_hooks: no such file or director

hence the need to install sass into the os x default version of ruby.

now we need to pass the appropriate arguments to sass, so that it knows what to do and what files to do it with. if we were running sass from the command line, we would probably do something like this at the start of our development session:

sass --watch sourcefolder:destinationfolder

in a real project that might look something like this:

sass --watch app/sass:public/stylesheets

this is a one-off command which forces compilation of any scss files in app/sass, into css files in public/stylesheets, whenever changes are made to the scss files. however, we want our builder to trigger the compile process each time we save our scss files, so --watch is inappropriate.

if we enter:

sass --help

we discover that the option we want is --update. luckily this works just like --watch in that it checks the designated folder recursively – so if we have many folders with scss files, we just specify a common parent folder. you may have some scss files which you want to include into other scss files, and should not be compiled into their own css files. if that is the case, rename those files with an underscore at the beginning, e.g. rename mixins.scss to _mixins.scss sass will still recognise those files for inclusion, but won’t compile css equivalents.

in my arguments field i have this:

--update ${workspace_loc:/project1/htdocs/theme}:${workspace_loc:/project1/htdocs/theme} --sourcemap=none --style compressed

in my case, the scss files are in the same folder as the compiled css files, so my source folder and destination folder are the same. i used the browse workspace button in one of the form fields to generate the ${workspace_loc} placeholder values for my source folders and destination folders. i also added a few more sass options – one to turn off the generation of .map files, the other to output css in a compressed style.

under the build options tab i have allocate console and during auto builds ticked, but nothing else.

click on ok to finish.

now, when i edit one of the scss files in my project1/htdocs/theme folder, in the eclipse console view i see that sass is doing its work, compiling the scss into css. success!

alternative method

use webstorm ; )