Using Sass in Prestashop 1.6 Theme

February 12, 2016 Lena Tsybulenko Prestashop
Using Sass in Prestashop 1.6 Theme

Prestashop 1.6 default theme was developed using Sass. In this article I’ll describe how I used Sass in Prestashop Theme development process.

Some words about Sass. In prestashop it uses “scss” syntax, similar to css, but Sass allows creating variables and mixins and replace similar repeatable styles with variables. It makes the development process easier and flexible.

.scss files available for compilation located in sass Theme folder.

Using Sass in Prestashop 1.6 Theme

In Theme Digital Store I’ve created, I used variables for theme colors, border-radius, border colors, header/columns background and others. I created $primary-color, $secondary-color, $btn-border-radius variables and used this variables for colors and button radius through the whole theme. All variables are available in _theme_variables.scss file.

Using Sass in Prestashop 1.6 Theme

I can simpIy change just one variable called $primary-color and my whole theme will turn to a new color, like on the screens below. This is a very powerful solution that reduces customization time.

Using Sass in Prestashop 1.6 Theme

I can change the $btn-border-radius variable from 35px to a 5px, and all the buttons will turn to a square shape.

I also created mixins for border-radius, transformation and transition. All this process, writing Sass code and compiling it to a css takes as much time as CSS development, but during customization process using Sass saves developer’s time.

How to compile Sass?

I use CodeKit on my Mac to compile Sass files. There are a lot of tools that allow compiling Sass: http://sass-lang.com/install. You can also use gulp-sass plugin for Gulp to compile Sass. But I prefer CodeKit, because it’s easier to use – you can just open CodeKit and add a project. Then open scss files in editor and change them, CodeKit will compile them to a css. To upload files to a server, I use gulp-sftp plugin. To use Gulp, you first need to install “Node Package Manager” on your machine: nodejs.org.

After installing Node Package Manager, you need to install gulp following getting started doc: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

And then install gulp in your project directory:

Now we need to create gulpfile.js in project directory, where we must write gulp configuration using javascript.  Here is the configuration which will upload css to server.

Open terminal and run gulp task, it will upload compiled css files to remote server.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *