In the first post of this litte blog series I showed you how to install SASS manually and how to compile it using the terminal. But this way is not very user friendly and you could easily forget to start the compiler/watch when working on a project.

Adding a file watcher

The easiest way to add the file watcher is by just opening a SASS file. PhpStorm will recognize it and show you a little Notification above the file content. Just click the “Yes” link and the settings screen will open:

If you don’t see the notification, you will find the option to add a file watcher at “File | Settings | Tools | File Watchers”. Here you just click the green plus icon to add a new file watcher and choose SCSS (not Sass, as this would be a file watcher to .sass files, the alternativ syntax, which is less frequently used):

Adjusting the file watcher settings

The default settings are quite good. PhpStorm will most probably find the path to your sass executable. In my case it’s a Windows file path:

One of the options I usually change is the “Arguments” setting. I prefer the expanded output style and not the default nested one, as it looks more like CSS you would usually write manually. My “Arguments” setting looks like this:

--style expanded --no-cache --update $FileName$:$FileNameWithoutExtension$.css

Conclusion

That’s all. Now every time you change your SCSS files (you don’t even have to save them explicitly with the default settings), your files will be compiled into CSS files. The file watcher will even recognize if you change a file that is imported into another file. If you don’t know what that means, just wait for my next blog posts, were I will explain some of the fundamentals of SASS.

Note: If you use the “Tools | Deployment” of PhpStorm to deploy to a FTP server, make sure you activate “Upload external changes” in the “Options” settings, as otherwise the compiled CSS file would not be uploaded.