In the beginning of working with sccs I used gulp in the commandline to manually run a gulp file, or used screen to have  a process running continuesly while using my console for aither things like wp cli. But I have switched, and now with pleasure I am using PhpStorm to do it for me. Here is how I did it:

1. Install sass
2. Set scope
3. Set file watcher
4. Done!

Installing sass is:

In your terminal install sass globally

$ npm install sass -g


+ [email protected]
added 15 packages from 18 contributors in 0.844s

Set scope

We only want files in our theme folder compiled, not in the WooCommerce folder, or any other*.

1. Press ‘ctrl + alt + s’ to open options, search for ‘File Watcher’ and press the ‘+’ top right.
2. Select SCSS to open the settings for a newly scss file watcher
3. Behind the value of the scope line click the 3 dots
4. Make sure the pattern line is empty and navigate to your theme folder, select it en press the button ‘include recursively’
5. Press ok

Setting filewatcher

To select the program you can set sass.cmd and find it in your appdata folder of your user accout (\AppData\Roaming\npm\sass.cmd)

If you want scss files in one folder and css in another this structure might be similar to mine:

theme
  - css
    - style.css
      - style.css.map
  - sass
    - style.scss
    - layout
      - _main.scss

In arguments I use:

$FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

(set the css in the css subfolder of the parent directory)

Similar in output paths to refresh:

$FileParentDir$/css/$FileNameWithoutExtension$.css:$FileParentDir$/css/$FileNameWithoutExtension$.css.map

If you have any problems set error reporting on in the bottom of the file watcher