Theme CSS using LESS & SCSS

The CSS for a theme is processed from LESS or SCSS files in the assets folder of the theme. For more information on writing LESS and SCSS, check their relevant sites:

Use Partials

You should break down your LESS or SCSS files down into sensible partials (e.g. buttons, forms, media, navigation, etc) that you @import in the bundle files.

Bundles

There is one bundle that is automatically included in the {{ selz_head }} tag:

  1. _store.less.liquid (or _store.scss.liquid)

    Used throughout the store, apart from the checkout.

Auto Prefixing

You don’t need to prefix your CSS declarations. We use autoprefixer to prefix your LESS and SCSS automatically. This means instead of writing all the “ms-“, “webkit-“, “moz-” prefixes or using mixins to do it, you can just use the W3C syntax and we handle the generation of the others. A real time saver.

Using Liquid inside LESS or SCSS

You can use liquid syntax within your LESS or SCSS files. This is particularly useful to include user settings within your stylesheets, such as colors, fonts etc.

Here’s an example using a user selected custom brand colors. Read the settings docs for more info.

// Branding
// --------------------------------------------------
@brand-primary:                             {{ settings.color_primary }};
@brand-secondary:                           {{ settings.color_secondary }};

Accessing Assets

You can access assets uploaded to the themes assets folder using the following syntax:

{{ "filename.jpg" | asset_url }}

Was this helpful?

3 1