Sass

Sass is the CSS pre-processor used with Galaxy Themes, allowing you to compile your .scss files to CSS without any configuration needed.

I want Standard CSS, no compilation by Galaxy

You can simply add your CSS files to the folder public and call them on the page with this syntax

Create a file public/folder-name/index.css and then link it from the html

<!-- this CSS is not compiled by Galaxy -->
<link rel="stylesheet" href="#$$#/folder-name/index.css?v{{website.version}}" />

It will be loaded like any theme asset, and Galaxy will directly serve the CSS file.

This is a quick way, but it does not handle design settings or minifying files.

This describes the new way to add SASS compilation to your theme that will be released mi-march. The previous way to import the main.css file still works (#$$#/css/main.css)

TLDR;

<!--
Directory structure:
my-theme/
├─ sass/
│  ├─ main.scss
│  ├─ print.scss
-->

<!-- Import files in HTML -->
<link rel="stylesheet" href="#$$#/galaxy-css/main.css" />
<link rel="stylesheet" media="print" href="#$$#/galaxy-css/print.css" />

• Create your entry file at the root of the folder sass: my-theme/sass/filename.scss

• in the HTML, use the path #$$#/galaxy-css/filename.css

• you can have several entry files. Replace "filename" with the files created

• no configuration file to create, the Scss compilation is handled by Galaxy if the theme is updated

With this, you are free to split the CSS between different files and decide when to load them

Simple example: main.css

To have your Sass files compiled by Galaxy, create the file inside the folder sass, and link the file in the HTML

1. Inside your theme, create a file my-theme/sass/main.scss

2. In the HTML, you can add the path to the CSS with this syntax #$$#/galaxy-css/main.css

<!-- this CSS is compiled by Galaxy, the entry point is sass/main.scss -->
<link rel="stylesheet" href="#$$#/galaxy-css/main.css" />

Galaxy replaces the path "#$$#/galaxy-css/main.css" with another path containing the CSS compiled just for this website.

The syntax #$$#/galaxy-css/*.css indicates to the backoffice that this is a file that should be compiled.

Compile several CSS files / Splitting CSS

Sometimes you have some CSS that only makes sense in a specific context (for one device, for some page templates, etc..)

Here is an example where I would have 3 entry files:

• main.scss

• desktop.scss

• mobile.scss

We create the 3 entry files at the root of sass folder

my-theme/
├─ sass/
│  ├─ _config.scss
│  ├─ desktop.scss
│  ├─ main.scss
│  ├─ tablet.scss

To have the path of each file, the syntax is #$$#/galaxy-css/filename.css

<link rel="stylesheet" href="#$$#/galaxy-css/main.css" />

<link rel="stylesheet" media="(min-width: 768px)" href="#$$#/galaxy-css/tablet.css" />

<link rel="stylesheet" media="(min-width: 1024px)" href="#$$#/galaxy-css/desktop.css" />

With this syntax, on small screens the file tablet.css and desktop.css will not be render-blocking.

CSS file per page template

In the case of a CSS file only for some page templates, you could link the file only from the HTML of these templates. If you want to inject the code in the head of the page, you can refer to the guide: Add code to the head / end of body

What if I want to lazyload my CSS?

These examples use a link tag, but you could decide to lazyload some CSS with Javascript. For example, if you have some CSS for a popup visible only sometimes, you could do something like this:

<script>
    var myThemelazyCSS = {
        'css-popups': '#$$#/galaxy-css/popups.css',
        'vendor-pikaday': '#$$#/galaxy-css/pikaday.css',
    };
</script>

and with Javascript, if there is a popup, you could decide to add the link tag dynamically using the URL from myThemelazyCSS['css-popups']

Possible future evolutions

• ability to inline CSS (could be useful if you have a very small CSS / identified critical CSS)

• ability the indicate at block level the CSS necessary, and Galaxy could aggregate these files and generate one CSS per page, with only the necessary blocks