SCSS compiler slow - 7 seconds for 2100 line SCCS File

Hi there,

Has anyone else found the SCSS compiler to be a quite slow? I have an SCSS file that that takes about 7 seconds to compile 1200 lines of SCSS to a CSS file (granted it also includes the following imports:

@import "scss/reset";
@import "scss/susy";
@import "scss/breakpoint";
@import "scss/css3-mixins";

This is really disrupting my workflow. Can anyone offer any advice on how to optimize phpstorm for this problem or generally? I'm fairly new to phpstorm.



Comment actions Permalink

PS I'm running a brand new computer with 12GB ram and an intel i7 processor. Most operations in phpstorm are not slow.

Comment actions Permalink

How did you setup your compiler? wich compiler do you use?

Comment actions Permalink

Hi. I had the same problem, I think it is because scss compiler is, as far as I know, based on ruby, and that is... slow.
I solved the probelm for me using node.js / grunt -> watch -> scss for grunt, and that works fast!!! Really. I have about 50 @import files and it takes one second or two on a i7 macbook pro. :-) Great!

Comment actions Permalink

Adrian - thank you. Yes I was using Ruby to compile the SCSS. I'm having some issues getting grunt to work but if I can't get that sorted I may just try a PHP compiler for SCSS.

Thanks for the advice!


Comment actions Permalink

I had the same problem with the PHPStorm watcher and Ruby scss compiler -- it just took way too long and was slowing me down. So, I ditched the PHPStorm file watcher entirely and switched to  using gulp-sass and it's a billion times faster.

Instead of installing gulp and gulp-sass in the specific project (which is not a node project and I don't want to deal with node modules getting uploaded by mistake or explaining to my client why that folder is there), what I did was create a folder called "scss-compiler" in my main Sites folder where I keep all my projects. The idea is I can use it for any project and simply adjust the entry and outout paths. 

I CD'd into the newly-created scss-compiler folder and ran these commands in a terminal:


  1. npm init (name the project anything except 'gulp-sass'  and then just hit enter for all the rest of the questions)
  2. npm install --save gulp
  3. npm install --save gulp-sass

Then I created a Gulpfile.js file and pasted this in there:

// contents of Gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

var entry = '../path/to/your/scss/folder/in/another/project/folder';
var output = '../path/to/your/css/folder/in/another/project/folder';

gulp.task('sass', function () {
return gulp.src(`${entry}/**/*.scss`)
.pipe(sass().on('error', sass.logError))

gulp.task('watch', function () {`${entry}/**/*.scss`, ['sass']);


Then just run 'gulp watch' and you're good to go. 

running 'gulp sass' runs an ala carte immediate compile 


Please sign in to leave a comment.