Developing with SASS using PHPStorm on Windows

4
votes

I'm running PHPStorm IDE on Windows.

I would like to start using Zurb Foundation and write my stylesheets using SCSS. Do I need to install Ruby or Compass to do so?

Is there a way to let PHPStorm automatically compile .css stylesheets for me in my projects (in custom paths for each project) whenever I edit a .scss file?

I've seen this http://www.jetbrains.com/phpstorm/webhelp/transpiling-sass-less-and-scss-to-css.html but looks like the instructions are for a unix system, while I run windows.

So far I did the following:

  1. I've installed http://rubyinstaller.org/ then
  2. successfully installed the sass and compass gems in the ruby/bin folder
  3. After this I pointed went to Project Settings in PHPStorm and told where to look for Compass

At this point what should I do? Define a config.rb for my project with Compass variables for where to look for SASS files and where to compile them? What else should I do?

1
rubywindowssassphpstormcompass-sass
blog.jetbrains.com/webstorm/2013/12/using-compass-in-webstorm (same as confluence.jetbrains.com/display/WI/Using+Compass ) – LazyOne
@LazyOne interesting but did not work; I tried to start a project with Foundation, but I don't see any files created. Then from the terminal I typed "compass init" but it says is not a recognised command. I did try to configure compass from the settings panel, still no use. – unfulvio
That's official manual. If it does not work then most likely something is missing/wrong on your side. I've tried it on simple project (just couple of files, nothing serious at all -- did it just for testing purposes only) and compilation worked for me (Windows 7). "is not a recognised command" -- most likely that Windows is unable to find the executable (it is not in the PATH environment .. or it is not propagated to IDE yet -- like in stackoverflow.com/questions/20687697/… case ) – LazyOne
I found jetbrains.com/phpstorm/webhelp/using-file-watchers.html quite helpful to set up a Sass watcher – Sascha

1 Answers

5
votes

If you are not using compass-specific stuff like its specific functions and mixins, I'd suggest using SASS transpiler to create CSS out of SCSS.

SCSS file watcher settings are rather simple, and you don't need any rb files being created.

Something like:

Program: C:\Ruby193\bin\scss.bat
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths: $FileNameWithoutExtension$.css

Note that, as @LazyOne has mentioned, you need to have C:\Ruby193\bin in your PATH to make this work.