Symfony 4: Adding SASS and using PHPStorm file watcher

And after we finished developing our code base, not having fat models, and deploying our app to Heroku, is time to move on.

Of course we can choose to just add basic CSS to our project, but using Sass can be very useful for a variety of reasons.

Sass is an extension of CSS, adding a series of very interesting features to it. It allows you to have variables, nested rules, and functions to generate rules.

Installing Sass

To install Sass just go to this address. In my case as I use a Mac OS, so I used brew to do the installation:

brew install sass/sass/sass

Folder Structure

Here, simply, I based my structure on the proposed by this article.

I created a folder named stylesheets in the root of my Symfony project, with the structure suggested.

That is, the Sass processor will have to use the main.scss file, to generate all the CSS files. The CSS files I choose to put in a public/styles folder.

File Watcher with PHPStorm

I decided to use the PHPStorm’s file watcher to generate the final CSS files.

To do this, when editing the .scss file, simply answer yes to the question that appears in the dialog box on the top. Or go to Preferences > Tools > File Watchers and add a new one using the plus button at the bottom.

After that use the following definitions as seen below.

The arguments I defined were:

Note: I have chosen not to generate source maps because I do not intend to edit style files in production.

Not using PHPStorm

What PHPStorm does, after changing any of the files, is simply to run the following command. If you prefer to use only the terminal, you could simply execute it.

The command below has the — watch argument which, instead of executing the process one time and ending, runs if any .scss files are changed.

Do you use SASS?

Tell me what is your opinion about it. Do you use all the time? What you liked and disliked about it? What other tools you use?

This article belongs to a series of posts about Symfony 4: