Eclipse plugin to automatically compile Sass files [closed]

Question

I'm currently using the Aptana plugin for Eclipse, which is giving me great syntax highlighting, and allows me to manually click to compile a *.scss file into a *.css file. What I would really like to be able to do is get it to automatically compile every time I save, but I cannot figure out how to do this.

I know you can use sass --watch on the command line, but I don't want to have to set this up manually every time I open eclipse, or create a new project.

Has anyone found a good way of achieving this? Is there must be a way of hooking into Aptana's Sass bundle and running it's compile command everytime I save? The accepted answer to this question suggests using a "Program Builder" - but is this really the best solution? If so does anyone have any tips/links to tutorials?

Update: I wrote up a blog post about how to use an ant script as a builder, but I'm still looking for a better way.

Charlsiecharlton

Could this page be of help? link [1]: wirelesswombat.com/2012/06/17/… – Antlia

I'm using Gradle with a autoBuildTasks buildship option that runs a gradle scss plugin at every build – Kalle

Answer 1

After lot of tries, I've found that the best solution in Eclipse is to define a simple Builder using the --update sass feature:

• From the Project menu select "Properties" and choose the "Builders" section.
• Create a new Builder and select "Program" as configuration type.
• Choose a name for your launch configuration (SASS?!).
• Insert the path of your sass installation into the Location field.
• Use ${project_loc} as working directory.
• In the Arguments text box insert the configuration parameters you want sass to use and, at the end, specify the --update parameter followed by your sass files directory source followed by ":" and the destination folder for the compiled css files. In my configuration "resources" is the source folder containing the .scss files and "web" is the destination directory containing the compiled .css files. The --update command will check for modifications in the source folder and all sub-folders. Screenshot
• In the "Build Options" tab just check all options under the "Run the builder:" section. You can also "Specify working set of relevant resources" to launch the builder only when files contained in selected folders are saved. Screenshot
• Click ok to save your launching configuration.
• Now try to modify a .scss file in your source directory and then save it, you'll see the sass CLI output in your console window.

The sass CLI will automatically check for modified resources inside the source folder (resources in my configuration) and compile them into the destination folder (web in my configuration). Also, all .sass files that @import the modified resources will be compiled.

Gasp

This works really well. I have .scss files and .css files in the same folder so I used "${project_loc}/src/main/webapp/css" for my working directory and used "--update .:." in the arguments. – Cru

I'd like to follow same solution, but I don't know which compiler I shall install. Please update your instruction to add download instructions for the SASS compiler. Thank you. – Extraditable

Answer 2

there is a watch switch for the sass comiler.
which rebuild the output (css) file everytime the source (scss,sass) change.

Quoting from : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Using Sass

Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. The first step for all of these is to install the Sass gem:

gem install sass If you’re using Windows, you may need to install Ruby first.

To run Sass from the command line, just use

sass input.scss output.css You can also tell Sass to watch the file and update the CSS every time the Sass file changes:

sass --watch input.scss:output.css If you have a directory with many Sass files,
you can also tell Sass to watch the entire directory:

sass --watch app/sass:public/stylesheets Use sass --help for full documentation.

Using Sass in Ruby code is very simple. After installing the Sass gem, you can use it by running require "sass" and using Sass::Engine like so:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss) engine.render #=> "#main { background-color: #0000ff; }\n"

Spiniferous

Answer 3

There is much easier solution. Just follow the instructions to install SASS from:

http://sass-lang.com/install

and you will notice that first you will have to install Ruby. After that, just go to the folder where your SCSS/CSS files are located, start CMD and run this DOS command:

>cd <path-to-your-css-files>
>sass --watch .

Then all you need to do is to link your SCSS files to be recognized by Eclipse as native CSS files. Follow this solution:

https://mcmap.net/q/193350/-how-to-integrate-css-pre-processing-within-eclipse-closed

Hope this helps.

Note: I might have missed one or two steps. This is as per what I remembered after I completed the installation. If you face any problem, just post a comment, and I will try to help you.

Tarek

Extraditable

How is that different from my answer from 14'? – Spiniferous

Thanks @TomerW ... I didn't get into the details to compare your answer with mine, on the surface, my answer has much less number of steps. Well, my answer does point you to other web pages, which might be the same as what you mentioned. – Extraditable