From version 1.6 the Prestashop default theme is developed using Sass, this means that the CSS of the theme is not written directly, is obtained after compiling the Sass files.
Sass files in Prestashop are written using “scss” syntax that is very similar to regular CSS but with a lot more features, this is an example from Prestashop 1.6:
You can see it uses many things that regular CSS doesn’t have like variables or indenting levels.
This means you cannot upload the files directly, you must compile .scss to .css before uploading to server, there are several programs that do this for Windows, Mac and Linux (Koala, Prepros, Scout, Hammer, Compass.app…) but I prefer to automate the process using Gulp (more on gulp: Gulp compiles, minifies and much more).
With gulp you can automate compilation to run each time you save a .scss file, I also use gulp to upload .css to server just after compiled and auto reload my browser.
I normally use a gulp module for Sass compilation, but in this case I call “compass watch” to avoid recompile and upload all .scss source files each time.
To install gulp you first need to instal “Node Package Manager”: nodejs
After installing Node Package Manager, now install gulp itself following gulp getting started doc: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
And it’s done! you now have gulp on your system, now go to any of your prestashop projects folder (command line) and run “gulp”:
oh! before we need to install gulp locally in this project, run “npm install gulp” and re-run “gulp“:
Gulp dependencies for our Prestashop setup
To use our Prestashop specific gulpjs.file we need install several gulp plugins before, run “npm install node-notifier gulp-sftp gulp-livereload gulp-exec gulp-cached run-sequence” that will install all dependencies:
Our specific “gulpfile.js” for Prestashop
The sequence we want is:
- “compass watch” compiles .scss to .css each time we save any .scss file compiling only necessary files
- gulp-sftp watch for .css changes and uploads new or updated .css to server
- livereload reloads my browser to see changes
All of these with the appropiate gulpfile.js will be done by gulp without our intervention.
This is the gulpfile we currently use at Incubalia:
And you, what do you use to compile your prestashop Sass?