Tag Archives: sass

Sass support upgraded for Spiffy Stores Themes

Posted on by

This is a quick “heads-up” for all our Spiffy Stores web designers and developers out there who are customizing and building fantastic themes for their customers.

As you already know, Spiffy Stores has always supported the use of Sass (Syntactically Awesome Style Sheets) to ease the development of stylesheets in your themes. It’s a great productivity tool and makes the whole job of building and managing your CSS styles a whole lot easier. In fact, at Spiffy Stores, we’ve been using Sass almost from day one, well over ten years ago.

Since it’s such a great productivity tool, we were a bit concerned to learn that our current implementation was being deprecated in favour of a newly developed version called Dart Sass, and that this version would be the basis of all future development going forward.

We’re happy to announce that we’ve just built a bridge to the new Dart Sass that can be used by all existing themes and any new themes without any change, ensuring our long-term commitment to the Sass language and environment.

We’re aware that another ecommerce platform has decided that supporting Sass is too difficult, and has chosen to withdraw support for Sass from their theme platform, requiring instead that all stylesheets be coded using native CSS. Booooo! As web developers ourselves, we’d be pretty unhappy about something like this, so if you know anyone who has been affected by this change, then please let them know that Spiffy Stores is fully behind Sass and it’s continued importance in the web development stack.

If you have any questions about the use of Sass, or developing themes for Spiffy Stores, please let us know at support@spiffystores.com.au.

Introducing SASS – Syntactically Awesome Spiffy Stores

Posted on by

Actually, it’s really “Syntactically Awesome Stylesheets”.

For all the theme designers out there, we’ve just made your life a little bit easier. We all know that sometimes CSS stylesheets can get complicated, so anything that can help you manage that complexity is a welcome bonus.

As you may already know, when you enable the Theme Editor by creating a ‘theme.settings‘ file, you can parse your CSS files by making sure they have a suffix of ‘.css.liquid‘.

Now, as part of the CSS processing that gets initiated to deal with the Liquid tags, we’ve added a pass through the SCSS processor, which is part of the SASS CSS extensions. You can read more about these CSS extensions at http://sass-lang.com

By using the CSS extensions, you can simplify your stylesheets by using variables, conditional logic, mixins and templates, nested attributes and a whole lot more. Even better, at the end of the processing you get a compressed CSS file so you can ensure that your site loads as fast as possible. Even if you don’t use any of the CSS extensions, you still get a compressed stylesheet, so that’s got to be something to smile about!

You can read more about the Spiffy Stores Theme Customizations in our Knowledge Base.