photo credit: digging my new Swatch via photopin (license)

Using SCSS to reduce Magento templating time

When creating Magento sites you often run into repeating (and boring) tasks like styling the shopping cart, the checkout progress, the login area of the user, etc… These pages are required yes, but they require a lot of CSS to be styled properly. Using a skeleton template or a boilerplate helps, but often you still are required to make adjustments to the stylesheet to make sure your checkout and login-process follow the same identity as your shop.
This is where SCSS comes in…

Wouldn’t it be great if you had some chunk of SCSS which handles the styling of the cart, checkout progress and login pages, and you only have to set parameters like margins, padding and border? Setting up something like this is quite easy actually.
First of, you need to create a seperate stylesheet for this and place it in your SCSS-folder. Let’s say we’ve called this file ‘_mage_checkout.scss’. Now, in your main SCSS-file you can simply import this with the @import command:

Now, the first rules in this CSS-file should be some variables. For example:

Next up is the styling of just the cart- checkout and login-options. This is the most cumbersome task, but it’s worth the time spent. A small snippet out of my SCSS file looks like this:

But it also include default styling (including the parameters) for stuff like buttons and forms.
Now, with each Magento site from now on, you can simply include this SCSS partial, adjust the parameters and the whole basic styling of your cart- and checkout-progress is already covered. This leaves only the fun part: the custom styling of the rest of your shop. All with all it makes styling the next Magento shop a whole lot easier.

How would you rate this article?

Leave a Reply