First, Prerequisites:
1. Install Ruby, if I remember correctly, the Mac comes with Ruby, terminal input ruby-v, enter, if the Ruby version number is displayed, the ruby environment is already installed. If not, install ruby yourself. For example, my Mac displays:
Ruby 2.0.0p648 (2015-12-16 revision 53162) [Universal.x86_64-darwin15]
2. Install the sass, the process and the win system, the same, after installation, terminal input SASS-V, enter, if the Sass version number is displayed, the instructions have been installed.
For example, my Mac displays:
tydemacbook-pro:~ ty$ Sass-3.4.21 (selective Steve)
Second, in the Webstorm configuration Scss Watcher
1. Open a Sass file, the above will display a message as follows, click on Add Watcher, open the Scss Watcher Configuration window.
2. In the newly opened window, configure the path of the Scss.bat in program one. Then click OK to exit. At this point, the configuration is completed, in the future as long as in this project, any place to edit the sass file, will automatically generate the corresponding CSS file and update the CSS code.
PS: I find this scss watcher not very useful. Tip I can't find compass/reset, I guess because of the path of the module referenced in my sass file, or other configuration problems, anyway, finally I go back to the terminal window with Compass compile to convert sass to CSS.
Mac under Webstorm add Scss Watcher